javascript - Adding data to a Vue.js Component -
hello i'm getting handle on vue.js , i've created component table (called setuptable). want able dynamically add data this. know vue.js listens push on data elements can't seem access data element of component through setuptablecomponent.data
. how access , append data component?
var setuptablecomponent = vue.extend({ template: '<table id="data-table">'+ '<tr v-for="item in items">'+ '<td>{{item.b}}</td>' + '<td>{{item.d}}</td>' + '<td>{{item.t}}</td>' + '</tr>' + '</table>', data: function(){ return { items: [ { t: "tester", b: "buster", d: "duster"}, { t: "not tester", b: "not buster", d: "not duster"} ]}; } }); vue.component('setup-table-component', setuptablecomponent); var setupdatatablev = new vue({ el: '#sidebar', ready: function() { } });
you use v-ref
access directly child component:
<div id="sidebar"> <button @click="onclick">add item</button> <setup-table-component v-ref:table></setup-table-component> </div>
then, access data of table ref
this:
this.$refs.table.$data.items.push(data)
Comments
Post a Comment