Список флажков без использования v-модели

Question

Vue имеет хороший пример использования нескольких флажков с одним и тем же атрибутом name, привязанным к одному массиву с использованием v-модели

Однако по какой-то причине я не могу использовать v-модель, поэтому я должен использовать @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);
      }
    },
  },
});

  
    
    {{ checkbox.value }}
  

{{ modelJson }}