vm.handleClick is not a function on vue.js

Question

I am using toggle buttons of argon template: argon template docs

And I want to put an handleChange on the toggle buttons, but It doesn't work, here my code:

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

In fact when I click on the toggle button I get this message:

TypeError: _vm.handleClick is not a function
at click (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)
at invokeWithErrorHandling (vue.esm.js?efeb:1863)
at HTMLInputElement.invoker (vue.esm.js?efeb:2188)
at HTMLInputElement.original._wrapper (vue.esm.js?efeb:7559)

gfcs gfcs · Accepted Answer · 2019-07-11T20:10:30

You should put it in the methods propery.

Try this:

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

vm.handleClick is not a function on vue.js

1 Answers