Vue.js不能访问到嵌套属性的数据对象

在Vue.js予取的JSON文件的某些数据是这样的：Vue.js不能访问到嵌套属性的数据对象

export default { 
    data() { 
     return { 
      data: [] 
     } 
    }, 
    created() { 
     this.fetchData();  
    }, 
    methods: { 
     fetchData() { 
      $.getJSON('data/api.json', function(el) { 
       this.data = el; 
      }.bind(this)), 
     } 
    } 
}

取出的数据具有以下结构：

{ 
    time: '17:00', 
    pick: { 
     box: { 
      single: 1, 
      multi: 2 
     }  
    } 
}

当我尝试进入{{ data.pick.box }} or {{ data.pick.box.single }}在我的部分，我总是收到此错误信息：

vue.js?3de6:2963 Uncaught TypeError: Cannot read property 'box' of undefined 
at Proxy.render (eval at <anonymous> (app.js:126), <anonymous>:4:46) 
at VueComponent.Vue._render (eval at <anonymous> (app.js:139), <anonymous>:2954:22) 
at VueComponent.eval (eval at <anonymous> (app.js:139), <anonymous>:2191:21) 
at Watcher.get (eval at <anonymous> (app.js:139), <anonymous>:1656:27) 
at new Watcher (eval at <anonymous> (app.js:139), <anonymous>:1648:12) 
at VueComponent.Vue._mount (eval at <anonymous> (app.js:139), <anonymous>:2190:19) 
at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:139), <anonymous>:5978:15) 
at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:139), <anonymous>:8305:16) 
at init (eval at <anonymous> (app.js:139), <anonymous>:2502:11) 
at createComponent (eval at <anonymous> (app.js:139), <anonymous>:4052:9)

的是对访问深层嵌套对象有任何限制吗？例如，当我打电话给{{ data }}时，我将整个数据结构正确显示为一个字符串。

正如娜拉所说，这里是小提琴：jsfiddle

来源

2017-01-02 Sebastian Rush

你可以设置一个的jsfiddle？ – Nora

第一次渲染'data'时是'[]'，并且没有任何'.pick.box'属性。 – sobolevn

你可以使用[v-if]（https://vuejs.org/v2/guide/conditional.html#v-if），正如我在回答中提到的，如果你不想使用一个额外的变量。 – Saurabh

您可以尝试等待数据加载完成你的模板来显示它：

export default { 
    data() { 
     return { 
      loading: false, 
      data: [] 
     } 
    }, 
    created() { 
     this.fetchData();  
    }, 
    methods: { 
     fetchData() { 
      this.loading = true; 
      $.getJSON('data/api.json', function(el) { 
       this.data = el; 
       this.loading = false; 
      }.bind(this)), 
     } 
    } 
}

模板：

<template> 
    <div v-if="!loading"> 
    {{ data.pick.box }} 
    </div> 
</template>

来源

2017-01-02 09:54:21 Nora

这工作很好。谢谢。 –

您正在收到此错误，因为data在加载时未填充，并且您在此期间出错。您可以在模板中使用v-if，直到数据填充到视图中。所以元素在数据加载前不会被渲染，一旦数据被加载，它就会显示数据。

它可以像以下：

<div v-if="data.pick"> 
    {{data.pick.box}} 
</div>

来源

2017-01-02 10:13:48 Saurabh

Vue.js不能访问到嵌套属性的数据对象

回答

相关问题