无法读取 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 语法来检索从服务器传递的数据。

原文由 Razinar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Thomas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试这个：

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

原文由 Amin Fazlali 发布，翻译遵循 CC BY-SA 3.0 许可协议