在VueJS中,我想将输入文本字段与复选框相关联,即,如果有人选择了一个复选框,则他应该在与该复选框相关联的输入字段中输入一些值。
现在的问题是,复选框是基于数据库值创建的,因此复选框的数量是动态的。 复选框与数组评估绑定:[],
<input type="checkbox" :value="assessment" :id="assessment+index" class="md-check" v-model="form.assessments">
因此,当选择一个复选框时,其值存储在数组评估中:[],每个选中的复选框将具有一个关联的值,该值将输入到文本字段中。
注意:我已经检查了以下链接,但不适用于vueJS。 Associate input type checkbox to input type text
答案 0 :(得分:1)
这是Vue发光的情况之一。在您链接的问题中,使用了jQuery。您会注意到他们必须手动选择一个相关的输入框并启用或禁用它。 Vue不需要这些。
在Vue中,我们在模板中具有for循环,并具有计算元素属性的能力。现在是时候使用它们了。您不清楚从服务器实际获得什么,但是可以说您从服务器获得以下数据结构。
{
assessments: [
{
label: "assessment 1",
value: 0
},
{
label: "assessment 2",
value: 1
},
{
label: "assessment 3",
value: 0
},
{
label: "assessment 4",
value: 0
}
]
}
要对此进行渲染,我们可以将该数据结构放在本地数据变量assessments
中,并循环遍历。
<template>
<div>
<div v-for="(assessment, index) in assessments" :key="index" class="row">
{{ assessment.label }}
</div>
</div>
</template>
我们仍然无法管理复选框或输入字段中的数据,因此请填充它。在用于分配this.assessments = whateveryougetfromtheserver;
的函数中,还要填充以下格式:
for (const assessment of this.assessments) {
this.form.assessments.enabled.push(assessment.value > 0);
this.form.assessments.value.push(assessment.value);
}
您最终将得到一个看起来像这样的数据结构:
{
assessments: [
{ label: 'label 1', value: 0 },
{ label: 'label 2', value: 1 },
// etc
],
form: {
assessments: {
enabled: [
false,
true,
// etc
],
value: [
0,
1,
// etc
]
}
}
}
现在,我们只需要映射复选框和输入字段,我们就很好了。为此,我们修改模板:
<div v-for="(assessment, index) in assessments" :key="index" class="row">
{{ assessment.label }}
<input type="checkbox" v-model="form.assessments.enabled[index]" class="md-check" />
<input type="number" :disabled="!form.assessments.enabled[index]" v-model="form.assessments.value[index]" />
</div>