vue.js - 不使用 v-model 的复选框列表

Question

Vue 有一个 good example使用具有相同 name 属性的多个复选框使用 v-model 绑定(bind)到同一数组

但是，由于某些原因我不能使用 v-model 所以我必须使用 @input 发出 checked 同时保持 value不变。

但它对我不起作用，同时选中/取消选中所有复选框，否则我必须更改我不想要的值。

有解决办法吗？

代码:https://codesandbox.io/s/71pm2wllp1?fontsize=14

Answer 1

Vue 在编译包含以这种方式绑定(bind)的复选框的模板时会生成特殊代码。由于您没有使用 v-model，因此您必须自己处理此功能。

尝试这样的事情:

new Vue({
  el: '#app',
  data: {
    checkboxes: [
      { name: 'jack', value: 'Jack' },
      { name: 'bob', value: 'Bob' },
      { name: 'alice', value: 'Alice' },
    ],
    model: [],
  },
  computed: {
    modelJson() {
      return JSON.stringify(this.model);
    },
  },
  methods: {
    handleChange(value, checked) {
      if (checked) {
        this.model = this.model.concat(value);
      } else {
        this.model = this.model.filter(x => x !== value);
      }
    },
  },
});

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

<div id="app">
  <div v-for="checkbox of checkboxes" :key="checkbox.name">
    <input
      type="checkbox"
      :id="checkbox.name"
      :name="checkbox.name"
      :value="checkbox.value"
      :checked="model.includes(checkbox.value)"
      @change="handleChange(checkbox.value, $event.target.checked)"
    />
    <label :for="checkbox.name">{{ checkbox.value }}</label>
  </div>
  <pre>{{ modelJson }}</pre>
</div>