javascript - Vue "on-change"方法不适用于复选框

Question

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

来自模板:

<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");
                        }
                },

Answer 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>