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

我正在使用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>

显示价值
名称
姓
导出默认值{
名称：“选项”，
数据：函数（）{
返回{
查看检查：false
}
},
handleClick:函数（事件）{
console.log（事件）
this.viewCheck=true
}
}

事实上，当我点击切换按钮时，我得到了以下信息：

TypeError:_vm.handleClick不是一个函数
单击（eval at./node_modules/vue loader/lib/template compiler/index.js？{“id”：“data-v-6f2958af”，“hasScoped”：false，“transformToRequire”：{“video”：[“src”，“poster”]，“source”：“src”，“img”：“src”，“image”：“xlink:href”}，“buble”：{“transforms”：}./node_modules/vue loader/lib/selector.js type=template&index=0！。/src/views/Option.vue
（app.js:7731），：22:34）
在调用错误处理时（vue.esm.js？efeb:1863）
在HTMLInputElement.invoker（vue.esm.js？efeb:2188）上
在HTMLInputElement.original._包装器（vue.esm.js？efeb:7559）处

---

你应该把它放在

方法

属性中

试试这个：

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

---

你应该把它放在

方法

属性中

试试这个：

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