Cannot Access property of nested objects vue

Question

I am using Vue for quite sometime now but having troubles on accessing certain property of my object..

I have object named "table" with "data" and "Paginate" properties that is being passed as a Props to my Datatable Vue component. When I try to console.log the "table" object on my Datatable component, I can see that the "data" and "Paginate" properties has values, but when I try to access the using "this.table.data" I get 0 values..

here is the structure of my table object:

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

trying to access the this.table.data on "Mount" of the Vue instance.

Thanks for the help!

Component Code:

 <script>
 window.Event = new Vue();

export default {

props: {
        tableid: String,
        settings: Object,
        table: Object,
    },
mounted: function(){
    console.log(this.table);
}
</script>

Need to see some more code. Can you show the whole component? — Bert, Mar 27 '17 at 02:32
Are you able to demonstrate the issue in a fiddle? I don't see anything really wrong yet. — Bert, Mar 27 '17 at 02:46
let me try @BertEvans. Thanks. But one note though, I can access the property on the updated vue hook. Do you have any idea if there are problems when we access vue props on mounted hook? thanks. — JCP, Mar 27 '17 at 02:55
That depends on when it is passed from the parent. If it's loaded asynchronously, it won't be there on mounted. — Bert, Mar 27 '17 at 02:59
Another note is I can see the values when I console log only the table object, but when I access the properties of the table object directly like this: 'this.table.data' I cannot access the values, its on my 3rd day debugging this error. — JCP, Mar 27 '17 at 03:09

score 0 · Answer 1 · answered Mar 27 '17 at 07:22

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>

Cannot Access property of nested objects vue

1 Answers1