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

Posted 2023-02-23

【中文标题】vm.handleClick 不是 vue.js 上的函数

【英文标题】：vm.handleClick is not a function on vue.js

【发布时间】：2019-11-21 14:22:25

【问题描述】：

我正在使用氩模板的切换按钮： argon template docs

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

<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.handleClick 不是函数 单击时（在 ./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) 在 invokeWithErrorHandling (vue.esm.js?efeb:1863) 在 htmlInputElement.invoker (vue.esm.js?efeb:2188) 在 HTMLInputElement.original._wrapper (vue.esm.js?efeb:7559)

【参考方案1】：

你应该把它放在methods 属性中。

试试这个：

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