Question

Vue有good example使用多个复选框，并使用v-model将相同的name属性绑定到同一数组

但是，由于某种原因，我无法使用v-model，因此必须使用@input发出checked，同时保持value不变。

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

有解决方法吗？

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

Answer 1

Vue在编译包含以这种方式绑定的复选框的模板时会生成特殊的代码。由于您没有使用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>

不使用v模型的复选框列表

1 个答案: