[英]Adding data to a Vue.js Component
大家好,我已经掌握了Vue.js,并为表创建了一个组件(称为setupTable)。 我希望能够动态地向其中添加数据。 我知道Vue.js侦听推送数据元素,但是我似乎无法通过setupTableComponent.data
访问组件的数据元素。 我将如何访问数据并将数据附加到此组件?
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 a Tester", b: "Not a Buster", d: "Not a Duster"}
]};
}
});
Vue.component('setup-table-component', setupTableComponent);
var setUpDataTableV = new Vue({
el: '#sidebar',
ready: function() {
}
});
您可以使用v-ref
直接访问子组件:
<div id="sidebar">
<button @click="onClick">Add item</button>
<setup-table-component v-ref:table></setup-table-component>
</div>
然后,像这样访问table ref
的数据:
this.$refs.table.$data.items.push(data)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.