无法访问嵌套对象 vue 的属性

Question

我已经使用 Vue 一段时间了，但在访问对象的某些属性时遇到问题。

我有一个名为"表"的对象，带有"数据"和"分页"属性，该对象作为 Props 传递给我的 Datatable Vue 组件。当我尝试控制台.log Datatable 组件上的"表"对象时，我可以看到"data"和"Paginate"属性具有值，但是当我尝试使用 "this.table.data" 访问时，我得到 0 个值。

下面是我的表对象的结构：

table : {
     data : array[7],
     paginate: Object
} 

尝试访问 Vue 实例的"挂载"上的 this.table.data。

感谢您的帮助！

组件代码：

 <script>
 window.Event = new Vue();
export default {
props: {
        tableid: String,
        settings: Object,
        table: Object,
    },
mounted: function(){
    console.log(this.table);
}
</script>

Answer 1

Vue.component('table-show', {
  template: '#table-show',
  props: {
    table: Object,
  }
});
new Vue({
  el: '#app',
  data: {
    tables: [{
      data: [1, 2, 3],
      paginate: true
    }, {
      data: [4, 5, 6],
      paginate: true
    }, {
      data: [7, 8, 9],
      paginate: false
    }, ],
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>
<template id="table-show">
  <li>{{table.data}}</li>
</template>
<div id="app">
  <ul>
    <table-show v-for="table in tables" :table="table"></table-show>
  </ul>
  <pre>
    {{$data.tables}}
  </pre>
</div>