javascript - 无法在 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: []}],
})

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

Answer 2

尝试将您的 v-for 包装到 v-if="flag"
将您的标志定义为 false
一旦您的数据来自后端更改标志...

Answer 3

试试这个：

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