根据 Vue2 中的复选框状态触发不同的功能答案

【问题标题】：Fire different functions depending on checkbox state in Vue2根据 Vue2 中的复选框状态触发不同的功能
【发布时间】：2017-09-25 18:35:53
【问题描述】：

我想知道是否有任何方法可以触发自定义函数 - 当复选框变为真值时一个函数，另一个当它变为假值时（不使用 $watch）。

例如：我已将输入包装在根 div 中

<div id="root">
   <input type="checkbox" v-model="editModeOn">
</div>

以及一个带有 disableEditMode（复选框未选中）和 enableEditMode（复选框已选中）的 vue 实例

new Vue({
    el: '#root',
    props: {
        editModeOn: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        disableEditMode() {
            // some code
        },
        enableEditMode() {
            // some code
        }
    },
});

我怎样才能实现这个功能？谢谢！

【问题讨论】：

这真的是一个组件吗？ Root Vue 通常没有props。另外，如果它是一个组件，是否会从组件外部更改值导致您需要处理更改？
是的，它是一个真正的组件，如果他们这样声明它可以有道具（你可以试试）。这是为了指定 editModeOn 道具的类型。

标签： javascript events vuejs2

【解决方案1】：

处理更改事件。

@change="editModeOn ? enableEditMode() : disableEditMode()"

new Vue({
    el: '#root',
    data:{
        editModeOn: false
    },
    methods: {
        disableEditMode() {
           console.log("disable")
        },
        enableEditMode() {
            console.log("enable")
        }
    },
});

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="root">
   <input type="checkbox" v-model="editModeOn" @change="editModeOn ? enableEditMode() : disableEditMode()">
</div>

【讨论】：

是的，这是一个很好的解决方案。但也许最好使用@change（例如，如果由于某些原因输入将被禁用）
@bashkovpd 我也是这么想的。