ElementUI + Vue3. Почему не работает v-model на форме с чекбоксами? Как подправить?

Проблема с использованием v-model на форме с чекбоксами в ElementUI и Vue3 может возникнуть из-за изменений в синтаксисе и поведении v-model во Vue3.

В Vue3 была внесена некоторая реновация в синтаксис v-model, чтобы добавить поддержку компонентов с множественным выбором, таких как чекбоксы. Теперь вместо использования значения boolean для каждого отдельного чекбокса, элементы с множественным выбором могут использовать массив значений, чтобы отслеживать все выбранные элементы.

Поэтому, если вы используете ElementUI с Vue3 и хотите, чтобы v-model работал с формой, содержащей чекбоксы, вам следует внести некоторые изменения в код.

Во-первых, вам необходимо определить переменную, которая будет использоваться в v-model, в виде массива:

data() {
  return {
    checkedItems: [],
  }
}

Затем, в форме, используйте v-model для привязки массива к списку чекбоксов:

<el-checkbox-group v-model="checkedItems">
  <el-checkbox label="Item 1"></el-checkbox>
  <el-checkbox label="Item 2"></el-checkbox>
  <el-checkbox label="Item 3"></el-checkbox>
</el-checkbox-group>

Теперь при выборе и снятии выбора с чекбоксов, выбранные элементы будут автоматически добавляться или удаляться из массива checkedItems.

Также обратите внимание, что если вы хотите использовать именно булево значение вместо массива, вы можете использовать computed свойство вместо переменной данных. Например:

computed: {
  checkedItem: {
    get() {
      return this.checkedItems.length > 0;
    },
    set(value) {
      this.checkedItems = value ? ['Item 1'] : [];
    },
  },
},

В этом случае, привязывайте v-model к свойству checkedItem:

<el-checkbox v-model="checkedItem" label="Item 1"></el-checkbox>

Это должно решить проблему с v-model на форме с чекбоксами в Vue3 с использованием ElementUI.