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

Question

我现在使用 Vue 已经有一段时间了，但是在访问我的对象的某些属性时遇到了麻烦..

我有一个名为“table”的对象，它具有“data”和“Paginate”属性，这些属性作为 Props 传递给我的 Datatable Vue 组件。当我尝试 console.log 我的 Datatable 组件上的“table”对象时，我可以看到“data”和“Paginate”属性具有值，但是当我尝试访问使用“this.table.data”时，我得到了0 值..

这是我的表对象的结构：

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

试图访问 Vue 实例的“Mount”上的 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>