Блог

У меня есть эти два типа контента со многими отношениями. Размер и меню Теперь в текущей ситуации я создал размер, назначил несколько меню, когда пытаюсь отредактировать размер. флажки меню не реагируют, как вы можете видеть на 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)
    }
},
  

Спасибо

Можете ли вы создать 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>
  

Или, может быть, пакет флажков, который вы используете, флажок группы поддержки?

Если ваша цель состоит в том, чтобы динамически обновлять массив contentTypes идентификаторами выбранных элементов объекта menus , вы можете захотеть:

• как было предложено @markcc, добавьте свойство checked к элементам menus массива и свяжите это свойство с помощью 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>