首页 文章

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

提问于
浏览 次
2

在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

vue.js

1 回答

  • 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>

    可以在codesandbox上找到完整的工作示例：
    Edit Vue Template

    回复于

相关问题