多个复选框选定元素传递到数组并从另一个数组显示在 vue js 中选中答案

【问题标题】：Multiple Checkbox selected elements pass to array and from another array show selected as checked in vue js多个复选框选定元素传递到数组并从另一个数组显示在 vue js 中选中
【发布时间】：2020-02-21 00:28:06
【问题描述】：

我对 vue js 非常陌生，需要一种方法，让我有多个复选框，当我选择它们时，数组会使用 Vue JS 的选中元素进行更新。例如：

allcolors = ['Red', 'Blue', 'Green']; 我选择前两个，所以我的

selectedColors = ['Red', 'Blue']; 然后点击保存，保存到数据库。

当我打开表单时，Red and Blue 会检查是否从数据库中获取记录。

fetchedColors = ['Red', 'Blue'];

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

new Vue({
  el: "#app",
  data: {
    items: [
      { label: 'Red', value: 'red' },
      { label: 'Blue', value: 'blue' },
      { label: 'Green', value: 'green' },
    ],
    checkedValues: [],
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label 
    v-for="(item, index) in items"
    :key="index"
   >
    {{ item.label }}
    <input 
     type="checkbox"
     :value="item.value"
     v-model="checkedValues"
    />
  </label>
  {{ checkedValues }}
</div>

不太清楚你在问什么。你的意思是这样的吗？检查他们可能提供帮助的文档 - https://vuejs.org/v2/guide/forms.html#Checkbox

【讨论】：

我想在表单显示上显示选中的复选框。

【解决方案2】：

new Vue({
  el: "#app",
  data: {
    items: [
      { label: 'Red', checked: true },
      { label: 'Blue', checked: true },
      { label: 'Green', checked: false },
    ],
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label 
    v-for="(item, index) in items"
    :key="index"
   >
    {{ item.label }}
    <input 
     type="checkbox"
     :checked="item.checked"
     @change="({ target: { checked }}) => items[index].checked = checked"
    />
  </label>
</div>

如果你想显示表单显示时选中的复选框，你可以这样做。

【讨论】：