如何在 vue js 中使用内联声明的变量？

Question

我正在使用 Vue.js（版本 3），我想做这样的事情：

<div v-for="item in list" v-if="item.someAttribute === someOtherVariable">

但是 Vue 返回错误：

Property "item" was accessed during render but is not defined on instance

因为，正如我想的那样，他正在寻找我创建 Vue 应用程序的data中的项目。 有没有办法解决这个问题？ 也许一些解决方法可以获得相同的效果？

Answer 1

由于隐含优先级，不建议在同一元素上使用v-if和v-for 。

根据官方文档

所以你应该这样做：

<template v-for="item in list">
  <div v-if="item">
    ....
  </div>
</template>

Answer 2

您不能在同一行中访问 v-for 和 v-if，如果这样做，则优先考虑您的v-if条件，这就是您收到该错误的原因

<div v-for="item in list">
  <span v-if="item.someAttribute === someOtherVariable">...</span>
</div>