使用带有过滤数据集的 V-for 循环

【问题标题】：using V-for loop with filtered data set使用带有过滤数据集的 V-for 循环
【发布时间】：2021-06-18 08:01:59
【问题描述】：

我正在使用下面的代码在表格中填写值

<td
v-for="(sinto, index) in castData"
:key="index"><p class="ssv" > {{ valueOf(castData[sinto.PartTarget]) }} </p></td>

在我的“castData”中，我有 15 个项目，但我只想返回包含“Sinto”的项目有没有办法应用这个过滤器。我尝试在第一个 castData 之后附加 .includes("Sinto") ，但没有成功。

【问题讨论】：

最简单的解决方案是在v-for 中的<p> 之前添加一个v-if 和您想要的支票
在同一个元素中结合 v-if 和 v-for 是 Vue 的一种反模式

标签： javascript vue.js v-for

【解决方案1】：

一种方法是在将 castData 传递给循环之前对其进行操作。

<td v-for="(sinto, index) in updateCastData(castData)" :key="index">
  {{ ... }}
</td>


export default {
        data() {
            return {
                initialCastData: [
                    { id: 1, sinto: true },
                    { id: 2, sinto: true },
                    { id: 3, sinto: false },
                    { id: 4, sinto: true }
                ]
            }
        },
        methods: {
            updateCastData(initialCastData) {
                return initialCastData.map( castDataItem => castDataItem.sinto )
            }
        }
    }

然后你可以像下面的例子一样运行它 v-for="(sinto, index) in updateCastData(`passing the initial array here`)"

由于我不知道您的数据的确切形式，您应该修改 updateCastData 函数以适合您的数据。

【讨论】：