无法读取vue.js中"未定义"的属性

Question

这是我的vue实例:

var vue = new Vue({
  el: '#vue-wrapper',
  data: {
    items: [],
}})

这是我的index.html.eex中的v-for循环

<div v-for="item in items[0].subItems">{{item.name}}</div>

这是我在文档就绪时填充项目的脚本,在我的Phoenix服务器渲染过程中传递数据.

<script type="text/javascript">
      jQuery(document).ready(function() {
      //Assign server-side parameters
      vue.items = <%= raw(@items) %>;
      console.log(vue.items);
    });
</script>

日志功能显示我想要的项目的正确列表.问题是我无法在v-for循环中访问它们,我得到:

vue.min.js:6 TypeError: Cannot read property 'subItems' of undefined

我无法访问第一个元素,就像仍未填充项目一样.我怎样才能做到这一点？我被迫在index.html.eex文件中初始化它,因为我需要eex语法来检索从服务器传递的数据.

Answer 1

var vue = new Vue({
  el: '#vue-wrapper',
  data: {
    items: [{ subitems: []}],
})

您的示例中未定义子项.这应该解决它.