更多信息

Question

我正在尝试构建一个三态复选框组件。最初，该复选框的值为null，并由indeterminate复选框表示。当用户单击不确定的复选框时，该值将变为true，然后单击false，然后再次为null。

到目前为止，这就是我所拥有的：

Vue.component('checkbox', {
        template: '<input type="checkbox" @change="change" class="checkbox-input">',
        props: ['currentSate'],
        mounted: function () {
            this.currentSate = null;
            this.$el.indeterminate = true
        },
        methods: {
            change: function () {
                if (this.currentSate == null) {
                    this.currentSate = true;
                    this.$el.checked = true;
                    this.$el.indeterminate = false;
                    return;
                }

                if (this.currentSate == true) {
                    this.currentSate = false
                    this.$el.checked = false;
                    this.$el.indeterminate = false;
                    return;
                }

                if (this.currentSate == false) {
                    this.currentSate = null;
                    this.$el.indeterminate = true;
                    return;
                }
                this.$emit('input', this.currentSate);
            }
        }
    });

        <checkbox v-bind:current-sate="chState"></checkbox>
                chState = {{chState}}

我得到的错误是：

避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“ currentSate”

这怎么实现？

Answer 1

出现此错误时，简而言之，您需要发出所需的值，但让父级对其进行设置，以使它向下流回该属性。

解决方案

因此，就您而言，您不应修改@input。只需:value新值，然后不修改currentSate。让父级修改@emit绑定到currentSate的内容，这将修改属性data。

我建议您使用:currentSate代替currentSate来遵循Vue约定。如果您发出value并收到currentSate，则input将立即可用。

对于Tri State Box

您可以听“单击”，然后打开属性“ currentSate”的值。只需根据当前值发出下一个值。您仍然需要让父级更新绑定值。

value

以下是监听事件并更新bound属性的示例：

v-model

现在，如果您发出onClick(value){ switch(this.currentSate){ case null: this.$emit('input', true); break; case true: this.$emit('input', false); break; case false: this.$emit('input', null); break; } }并绑定到<checkbox v-bind:current-sate="chState" @input='chState=$event'></checkbox>而不是input，则可以这样做：

:value

currentSate适用于以下惯例：将值作为<checkbox v-model="chState"></checkbox>发出，并将属性作为v-model接受。

Answer 2

没有一个答案是完整的所以就在这里。

Vue.component('checkbox', {
        template: '<input type="checkbox" @change="change" class="checkbox-input">',
        props: ['value'],
        mounted: function () {
            this.value = null;
            this.$el.indeterminate = true
        },
        methods: {
            change: function () {
                if (this.value == null) {
                    this.$emit('input', true);
                    return;
                }

                if (this.value == true) {
                    this.$emit('input', false);
                    return;
                }

                if (this.value == false) {
                    this.$el.indeterminate = true;
                    this.$emit('input', null);

                    return;
                }
            }
        }
    });

    var myApp = new Vue(
        {
            el: '#app',
            data: {
                chState: null,
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <checkbox v-model="chState"></checkbox>
        chState = {{chState}}
</div>

组件双向属性绑定...三态复选框

2 个答案:

更多信息

解决方案

对于Tri State Box