Vue“on-change”方法不适用于复选框答案

【问题标题】：Vue "on-change" method not working with checkboxVue“on-change”方法不适用于复选框
【发布时间】：2020-06-24 15:56:24
【问题描述】：

我正在尝试使用带有复选框的方法，但它没有在 VueJS 中触发。我已经从我的组件的模板部分和方法部分包含了 sn-ps。组件及其中的所有其他内容都可以正常加载，没有任何控制台错误，但是当我单击复选框时，我无法触发此方法。我做错了什么？

来自模板：

<input type="checkbox" v-on:change="myMethod(this)" />

FROM 方法：

myMethod: function (chck) {
                        if (chck.checked == true) {
                            console.log("true");
                        } else if (chck.checked == false) {
                            console.log("false");
                        }
                },

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

将this 传递给Vue 中的事件处理程序会将整个组件 传递给事件监听器，而不仅仅是元素。这是因为，在 vue-bindings 中，您只是在组件范围内编写 JavaScript。

相反，不要在模板中传递任何内容（这将导致您的方法被传递常规的event 对象），并使用event.target.checked 来检查复选框是否被选中（实际上，不要这样做正是这样，这只是一个更“直接”的解决方案。请参阅下面的正确方法。

new Vue({
  el: '#app',
  methods: {
    myMethod: function(event) {
      if (event.target.checked) console.log("checked");
      else console.log("unchecked");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="checkbox" @change="myMethod" />
</div>

但是，值得注意的是，正确的方法是使用v-model。这样，您就可以维护单一的事实来源，并且您的应用仍然是数据驱动的：

new Vue({
  el: '#app',
  data: {
    tickBoxChecked: false,
  },
  methods: {
    myMethod: function() {
      if (this.tickBoxChecked) console.log("checked");
      else console.log("unchecked");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="checkbox" v-model="tickBoxChecked" @change="myMethod" />
</div>

【讨论】：