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

Question

我正在使用下面的代码

在 table 中填充值

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

在我的 'castData' 我有 15 件商品，但我只想 return 包含“Sinto”的那些有没有办法应用这个过滤器。我试过在第一个 castData 之后附加 .includes("Sinto") 但没有成功。

Answer 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 函数以适合你的。

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

using V-for loop with filtered data set

javascript

vue.js

v-for