Как упростить пользовательский компонент с несколькими флажками

Question

У меня странная (по крайней мере для меня) проблема с несколькими флажками с v-моделью.При использовании нескольких флажков, которые v-model 'присвоены одному свойству, создается обычный массив, который выполняется с кодом ниже:

.form-check
  input.form-check-input(type=“checkbox” name=“checkbox” v-model=“methodology” value=“issue tracking tool”)
  label.form-check-label issue tracking tool

Однако, когда я пытаюсь переместить его в компонент «Один файл», мне пришлосьскопируйте некоторые магические трюки с форума Vue.js, чтобы заставить его работать.Я все еще подозреваю, что должен быть более легкий способ достигнуть этого.Я не могу себе представить, что это не было решено с помощью простых решений, поскольку это довольно распространенный шаблон (флажок в компоненте - ничего экзотического, верно?).Любая помощь приветствуется!

Вот рабочая jsfiddle - имейте ввиду, что ошибок нет.Я просто хочу знать, действительно ли это так сложно.

Answer 1

Ответ - нет.Вы можете сделать это волшебство по-другому, но это нужно сделать.

Vue должен делать магию за кулисами для флажка, потому что в отличие от всех других входов, которые имеют одинэлемент, который обновляется, флажок должен управлять, находится ли значение в массиве.Это означает, что слушатели и значения должны быть пропатчены между оболочкой и вводом.