vm.handleClick不是vue.js上的函数

Question

我正在使用argon模板的切换按钮：argon模板文档

我想在切换按钮上放一个句柄，但是它不起作用，这里是我的代码：

<template>
  <div class="option">
      <div>Show value
          <label class="custom-toggle">
          <input type="checkbox" @click="handleClick($event)">
          <span class="custom-toggle-slider rounded-circle"></span>
          </label>
          <div v-if="viewCheck"> 
           <div>Name </div>
           <div>Surname</div>
          </div>
       </div>
  </div>
</template>

<script>
export default {
  name: 'Options',
  data: function() {
    return {
      viewCheck:false
    }
  },
  handleClick: function(event) {
      console.log(event)
      this.viewCheck = true
  }
}
</script>

事实上，当我点击切换按钮时，我得到了这条消息：

TypeError：_vm.handle点击不是一个函数
在点击（评估在./node_modules/vue-loader/lib/temet-编译器/index.js?{"id"："data-v-6f2958af"，"hasScoped"： false，"transformToDemire"：{"video"：["src"，"海报]，"源"："src"，"img"："src"，"图像"："xlink： href"}，"buble"：{"变换":{}}}!./node_modules/vue-loader/lib/selector.js?type=template

Answer 1

你应该把它放在方法属性中。

试试这个：

export default {
  name: 'Options',
  data: function() {
    return {
      viewCheck:false
    }
  },
  methods: {
    handleClick: function(event) {
      console.log(event)
      this.viewCheck = true
    }
  }
}