开发者问题收集

为什么如果不在循环中我就无法访问对象数组中的属性？

2024-01-25
107
javascript vuejs3

我正在使用 Vue 3。 如果我这样写： 

<p v-for="(prs, index) in settings.pressure">{{settings.pressure[0].value}}</p>

我可以看到正确的值，但如果我使用这个（我需要的）： 

<p>{{settings.pressure[0].value}}</p>

它会抛出一个错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')

为什么它在第一个版本中被定义而在第二个版本中未定义？

2个回答

给定表达式 settings.pressure[0].value ，

  • 将其放置在 v-for 之外并查看收到的错误告诉我们，在安装后的某个时间点， settings.pressure 为 undefined 。并且 undefined 没有 0 属性。它没有 任何 属性，尝试访问其上的属性将产生您看到的错误
  • 将其放置在 v-for 内并且没有看到错误告诉我们，在安装后的某个时间点， settings.pressure 被分配了一个可迭代集合 1 ，此时 v-for 模板将针对集合中的每个项目执行一次。因为这发生在 settings.value 被填充之后，表达式不再出错。

一种可能的情况是，当组件被挂载时， settings.pressure 是 undefined ，并在之后不久被从待处理请求收到的一些数据填充。

重要的 旁注 ：如果 settings.pressure[0] 在填充时是 ref() ，则您不需要（也不想）在 <template /> 中使用 .value 。所有 ref 都由 Vue 在模板中自动解包（应在没有 .value 的情况下使用）。当然，如果 settings.pressure[0] 是具有 value 属性的对象，则不适用。

这里的主要内容是 v-for 模板代码不一定在组件安装时运行，除非其值是可迭代的。它在控制 v-for 的可迭代集合填充时运行，集合中的每个项目一次。

1 - v-for 可以迭代数组、js 映射、集合、对象或正数（Vue 内部将 n 转换为 Array.from({ length: n }) ）。

tao
2024-01-26

模板加载时，settings.pressure 似乎未定义。

您可以 for in 循环 未定义元素而不会引发错误。由于它不循环任何内容，因此不会评估 <p>{{settings.pressure?.[0].value}}</p> 。因此，它为您的 settings.pressure 状态加载提供了时间，这将按预期呈现元素。

以下代码将打印“未抛出错误” 

try {
    for (let i in undefined) {}
    console.log("No error thrown")
} catch (error) {
    console.log("Error thrown")
}

但是，您的第二个答案立即访问了数组中未定义的第一个元素。这将引发您的错误。

您可能希望尝试使用可选，以便在加载状态之前不会引发错误。

<p>{{settings.pressure?.[0].value}}</p>

Stevn
2024-01-26