VueJS multiple checkbox не работает с v-моделью


VueJS multiple checkbox не работает с v-моделью

08.11.2020 09:11:36 Просмотров 4 Источник

У меня есть эти два типа контента со многими отношениями. Размер и меню Теперь в текущей ситуации я создал размер, назначил несколько меню, когда я пытаюсь отредактировать размер. флажки меню не реагируют, как вы можете видеть в GIF, 5 Меню выбраны, но когда я снимаю флажок с одного меню,два меню снимаются. Я не знаю, чего мне здесь не хватает.

GIF enter image description here

Ввод

<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

markcc

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?

Elise Patrikainen

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>
Помочь в развитии проекта:
Закрыть X