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

Posted 2023-02-16

【中文标题】无法在 vue.js 中读取“未定义”的属性

【英文标题】：Cannot read property of 'Undefined' in 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() 钩子内部）？

【参考方案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 上未定义。