在 VueJS 中如何将输入类型复选框与输入类型文本相关联

Posted 2023-02-16

【中文标题】在 VueJS 中如何将输入类型复选框与输入类型文本相关联

【英文标题】：In VueJS how to associate input type checkbox to input type text

【发布时间】：2018-12-23 01:27:17

【问题描述】：

在 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

【参考方案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>

可以在代码沙箱上找到完整的工作示例：