Question

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

我的对象名为＆＃34; table＆＃34;用＆＃34;数据＆＃34;和＃34; Paginate＆＃34;作为Props传递给我的Datatable Vue组件的属性。当我尝试console.log时，＆＃34;表＆＃34;我的数据表组件上的对象，我可以看到＆＃34;数据＆＃34;和＃34; Paginate＆＃34;属性有值，但是当我尝试访问使用＆＃34; this.table.data＆＃34;我得到0值..

这是我的表对象的结构：

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

尝试访问＆＃34; Mount＆＃34;上的this.table.data Vue实例。

感谢您的帮助！

组件代码：

 <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>

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

1 个答案: