无法在 vue.js 中读取“未定义”的属性答案

【问题标题】：Cannot read property of 'Undefined' in vue.js无法在 vue.js 中读取“未定义”的属性
【发布时间】：2018-07-27 05:31:51
【问题描述】：

这是我的 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 语法来检索从服务器传递的数据。

【问题讨论】：

您的 Vue 很可能是在数据可用之前创建的，导致未定义。
为什么要通过 jQuery 加载数据，而不是在 Vue 内部（例如在 mounted() 钩子内部）？

标签： javascript vue.js phoenix-framework v-for

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

没有。这只是场景的一个例子。问题是我无法访问 items[0] 因为它是未定义的
那是因为您将一个空数组定义为项目 und，而空数组在位置 0 上未定义。