javascript - 多个复选框选定的元素传递到数组并从另一个数组显示在 vue js 中选中为选中状态

Question

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

allcolors = ['红色', '蓝色', '绿色']; 我选择前两个，所以我的

selectedColors = ['红色', '蓝色']; 然后点击保存，保存到数据库。

当我打开表单时，红色和蓝色会被检查从数据库中获取记录。

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

Answer 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://v2.vuejs.org/v2/guide/forms.html#Checkbox