javascript - 取消选中子组件 Vue.js 中的所有复选框

Question

我遇到以下问题:我的父组件带有复选框列表和两个输入。因此，当这两个输入中的任何一个发生更改时，我需要取消选中所有复选框。如果您能帮我解决这个问题，我将不胜感激。 我想更改 checkedItem 以触发子项中的 watch，然后更新所有子项，但它不起作用。

parent.vue

      <template>
        <div class="filter-item">
            <div class="filter-checkbox" v-for="item in filter.items">
                <checkbox :item="item" v-model="checkedItem"> {{ item }} </checkbox>
            </div>
            <div class="filter-range">
                <input v-model.number="valueFrom">
                <input v-model.number="valueTo">
            </div>
        </div>
    </template>
<script>
    import checkbox from '../checkbox.vue'

    export default {
        props: ['filter'],
        data() {
            return {
                checkedItem: false,
                checkedItems: [],
                valueFrom: '',
                valueTo: '',
            }
        },
    watch: {
        'checkedItem': function () {},
        'valueFrom': function () {},
        'valueTo': function () {}
    },
    components: {checkbox}
}
</script>

child.vue

<template>
    <label>
        <input :value="value" @input="updateValue($event.target.value)" v-model="checked" class="checkbox"
               type="checkbox">
        <span class="checkbox-faux"></span>
        <slot></slot>
    </label>
</template>

<script>
    export default {
        data() {
            return {
                checked: ''
            }
        },
        methods: {
            updateValue: function (value) {
                let item = this.item
                let checked = this.checked
                this.$emit('input', {item, checked})
            }
        },

        watch: {
            'checked': function () {
                this.updateValue()
            },
        },

        created: function () {
            this.checked = this.value
        },

        props: ['checkedItem', 'item']
    }
</script>

Answer 1

当您的 v-for 在父组件中渲染时，所有渲染的 filter.items 都绑定(bind)到相同的 checkedItem v-model 。

要纠正此问题，您需要执行以下操作:

<div class="filter-checkbox" v-for="(item, index) in filter.items">
    <checkbox :item="item" v-model="item[index]> {{ item }} </checkbox>
</div>

要解决您的其他问题，更新子组件列表就像更新 filter.items 一样简单。

如果你不想使用观察者，你甚至不需要观察者。这是一个替代方案:

<input v-model.number="valueFrom" @keypress="updateFilterItems()">

然后:

methods: {
    updateFilterItems () {
        // Use map() or loop through the items
        // and uncheck them all.
    }
}

总是问自己两次是否有必要观看。它可能会造成不必要的复杂性。