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) 

https://jsfiddle.net/gjtf6sse/1/


Comments

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -