Vue-js表单的动态v-model，它是用v-for渲染的

Question

我有1个复选框组和9个单选按钮组，每个组都需要v-model，但我不知道如何将9个不同的数据属性放在那里。

我的数据如下：

数据(({返回｛

servicesId:[]，personId:"，incomeId:"，extraIncomeId:"，pdvId:"，paymentId:"，客户端ID:"，cashRegisterId:"，eBankingId:''，

}}

在模板中是这样的：

<div  v-for="data in formData" :key="data.id">
<h5>{{data.question_text}}</h5>
<div class="form-check" v-for="text_o in data.question_options" :key="text_o.id">
<input  class="form-check-input"   
:type="data.question_type.type" 
:value="text_o.id" :id="text_o.id"
v-model="[HERE GOES "9 "data props"]">
<label  class="form-check-label"  :key="text_o.id" :for="text_o.id"> {{text_o.option_text} 
</label>
</div>
</div>

这是formData数组的一部分(因为它很长，如果你愿意，我可以发布它的所有内容(：

{
"id": 1,
"question_type_id": 1,
"title": "new ent",
"question_text": "Planirate da se bavite:",
"created_at": "2021-10-12T13:42:17.000000Z",
"updated_at": "2021-10-12T13:42:17.000000Z",
"question_options": [
{
"id": 1,
"question_id": 1,
"option_text": "Uslugama",
"price": 40,
"created_at": "2021-10-12T13:44:40.000000Z",
"updated_at": "2021-10-12T13:44:40.000000Z"
},
{
"id": 2,
"question_id": 1,
"option_text": "Trgovinom",
"price": 60,
"created_at": "2021-10-12T13:46:53.000000Z",
"updated_at": "2021-10-12T13:46:53.000000Z"
},
{
"id": 3,
"question_id": 1,
"option_text": "Proizvodnjom",
"price": 80,
"created_at": "2021-10-12T13:47:22.000000Z",
"updated_at": "2021-10-12T13:47:22.000000Z"
}
],
"question_type": {
"id": 1,
"type": "checkbox",
"created_at": "2021-10-12T13:40:17.000000Z",
"updated_at": "2021-10-12T13:40:17.000000Z"
}
}
Thanks.

Answer 1

如果您希望您的值成为数据的一部分，您可以创建一个包含表单数据的对象，如下所示：

data() {
return {
formValue: {
servicesId: [],
personId: "",
incomeId: "",
extraIncomeId: "",
pdvId: "",
paymentId: "",
clientId: "",
cashRegisterId: "",
eBankingId: "",
},
}
}

添加该对象后，只需向表单数据对象添加一个名称，如下所示：

formData: [
{
id: 1,
question_type_id: 1,
title: "new ent",
question_text: "Planirate da se bavite:",
created_at: "2021-10-12T13:42:17.000000Z",
updated_at: "2021-10-12T13:42:17.000000Z",
name: "servicesId",   <-- modified part
question_options: [...]
}
]

现在，您可以使用该名称动态访问作为数据一部分的formValue对象：

<div v-for="data in formData" :key="data.id">
<h5>{{ data.question_text }}</h5>
<div
class="form-check"
v-for="text_o in data.question_options"
:key="text_o.id"
>
<input
class="form-check-input"
:type="data.question_type.type"
:value="text_o.id"
:id="text_o.id"
v-model="formValue[data.name]"   <-- modified part
/>
<label class="form-check-label" :key="text_o.id" :for="text_o.id">
{{ text_o.option_text }}
</label>
</div>
</div>

希望这种方法能帮助你，你会在数据中有你的值，它们不会作为单独的属性出现，但它们将是名为formValue的包装对象的一部分