向Vue.js組件添加數據

Question

大家好，我已經掌握了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() {
  }
});

Answer 1

您可以使用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)

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