javascript 如何在vuejs 3中循环时更改单个项目的v-for?

5lhxktic  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(123)

我正在努力实现以下目标:

<tr v-for="item in items" :key='item'>
 <td v-for="field in fields" :key='field'>
        {{ item[field.toLowerCase()] }}
 </td>
</tr>

正如你可能注意到的,我的field变量是每个item元素的键,但是这是作为NameID返回的,我不能以这种方式使用它们。我不想有item[field.toLowerCase()],因为我想以一种更整洁的方式拥有它,只使用item[keyField],其中keyFieldfield的修改。
有没有可能在VueJS 3中做这样的事情?我尝试了以下方法:

<tr v-for="item in items" :key='item'>
 <td v-for="field.toLowerCase() as keyField in fields" :key='field'>
        {{ item[keyField] }}
 </td>
</tr>

但没有成功。

wko9yo5t

wko9yo5t1#

我不知道如何实现你想要的方式。
但是你可以使用function/computed property来小写你的字段。
选中显示筛选/排序结果
还可以使用maptoLowerCase()直接应用于阵列

fields.map((f) => f.toLowerCase())

x一个一个一个一个x一个一个二个一个x一个一个三个一个

相关问题