VueJS multiple checkbox не работает с v-моделью
У меня есть эти два типа контента со многими отношениями. Размер и меню Теперь в текущей ситуации я создал размер, назначил несколько меню, когда я пытаюсь отредактировать размер. флажки меню не реагируют, как вы можете видеть в GIF, 5 Меню выбраны, но когда я снимаю флажок с одного меню,два меню снимаются. Я не знаю, чего мне здесь не хватает.
GIF
Ввод
<label v-for="(type,i) in menus" :key="i">
<p-check color="danger" name="ctype" class="p-default text-sm" v-model="contentTypes" :value="type.id">
<span class="text-base capitalize font-medium">{{type.title}}</span>
</p-check>
</label>
Вычислительный Метод
contentTypes: {
get: function () {
return this.editingTable.data.menus.map(e => e.id)
},
set: function (value) {
console.log(value)
}
},
Спасибо
Ответы - VueJS multiple checkbox не работает с v-моделью / Vuejs multiple checkbox not working with v-model
08.11.2020 10:50:43
Можете ли вы сделать jsFiddle и поделиться с нами ссылкой для этого? Я не совсем уверен, почему вы используете вычисленный для вашего случая, если бы для меня я просто добавил параметр (isChecked) в ваш объект меню.
<label v-for="(type,i) in menus" :key="i">
<p-check color="danger" name="ctype" class="p-default text-sm" v-model="type.isChecked" :value="type.id">
<span class="text-base capitalize font-medium">{{type.title}}</span>
</p-check>
</label>
Или, может быть, пакет checkbox, который вы используете в группе поддержки checkbox?
08.11.2020 07:42:59
Если ваша цель состоит в динамическом обновлении массива contentTypes с идентификаторами выбранных элементов объекта menus, вы можете захотеть:
- как было предложено @markcc, добавьте свойство
checkedк элементамmenusarray и свяжите это свойство с помощью директивыv-model(1) - добавьте вычисляемое свойство
contentTypes, которое уменьшает массивmenusдо массива идентификаторов выбранных элементов (2) - для разработки добавьте наблюдатель в свойство
contentTypesдля регистрации его изменений (3)
Вот этот псевдокод:
<template>
<div>
<!-- (1) -->
<p-check v-for="type in menus" :key="type.id" v-model="type.checked">
<span>{{type.title}}</span>
</p-check>
</div>
</template>
<script>
export default {
data() {
return {
// (1)
menus: [
{id: 1, checked: false, title: 'type 1'},
{id: 2, checked: false, title: 'type 2'}
]
}
},
computed: {
// (2)
contentTypes() {
return this.menus.reduce(
(acc, type) => {
if (type.checked) acc.push(type.id)
return acc}
, []
)
}
},
watch: {
// (3) - in this usecase, only for developement
contentTypes(value) {
console.log(value)
}
}
}
</script>