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

Question

我正在使用氬氣模板的切換按鈕： 氬氣模板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”，“海報”]，“源”：“ src”，“ img”：“ src”，“圖像”：“ 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）

Answer 1

您應該將其放入methods屬性中。

嘗試這個：

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