vue.js - 在 Vue.js 中迭代表单字段

Question

我有一个产品列表，我的产品项目有一些规格，根据选择的产品类型而有所不同。因此，我不想制作 3 个不同的编辑表单（每个产品 1 个），我想遍历我的规范列表中的每个表单字段。

但是我不能在迭代中使用 v-model ，所以我必须将它绑定到:value，但是我不能将这些值动态绑定回我的表单对象。

如何通过迭代对象并将其绑定回我的表单有效负载来使我的表单动态化？

v-for

 <div v-for="(spec, index) in item.specs" :key="index">
    {{spec}}
    <v-text-field :name="spec" :label="index" :value="spec"></v-text-field>
 </div>

目的

我从我的 API 返回中填充这个对象this.specs = response.data.specs

specs:{}

标签： vue.jsnuxt.js

Answer 1

您可以 v-model用于双向数据绑定。作为

<div v-for="(spec, index) in item.specs" :key="index">
    {{spec}}
    <v-text-field :name="spec" :label="index" :value="spec" v-model='item.specs[index]'></v-text-field>
 </div>