javascript - Vue、复选框和计算属性

Question

我正在构建一个 Vue 2 应用程序，在页面中，我需要跟踪单个复选框的值。所以我这样做了:

<template>
    <div>
        <input
            type="checkbox"
            v-model="checkboxValue"
            /> Check to accept payment <a href="url" target="_blank">terms and conditions</a>
    </div>
</template>

<script>
export default {
    props: {
        cardData: {
            type: Object,
            required: true,
        },
        eventBus: {
            type: Object,
            required: true,
        },
        url: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            checkboxValue: false,
        };
    },
    computed: {
        forwardCheckboxValue() {
            console.log(this.checkboxValue);
            this.eventBus.$emit("checkbox_value", {
                checkboxValue: this.checkboxValue,
            });
        },
    },
};
</script>

<style>
</style>

基本上，我想跟踪是否选中了该复选框，并且每次值发生变化时，我都想发出一个事件来警告我。

问题是计算属性中的console.log没有被触发。我错过了什么？

Answer 1

您可以使用computed setter并从 data 选项中删除 checkboxValue。这是fiddle

computed:{
    checkboxValue:{
        get(){
            return false;
        },
        set(newValue){
            this.$emit('checkbox-changed', newValue);
        }
    }
}

或者按照弗兰克教务长的建议设置 watcher它应该与您正在观看的 data 属性具有相同的名称。这是fiddle

watch:{
    checkboxValue(newValue){
        this.$emit('checkbox-changed', newValue);
    }
}