无法读取 vue.js 中的 'Undefined' 的 属性

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>