trigger false to true in vue

Question

I am using laravel 5.6 and I'm trying to hit the false item to true for submit the button spinner.

My form looks like this:

<template>
<form aria-label="Register" @submit.prevent="hit()">
<button type="submit" class="btn btn-primary">
   <i class="fa fa-circle-o-notch fa-spin" v-if="spin"></i> Register
</button>
</template>

I added v-if="spin":

<script>
data(){
   return{
     spin:false    
   }
},
methods:{
 hit(){
  spin = true
}
</script>

It doesn't work! But when I change the data: spin to true. It keeps spinning by default.

Please help me.

Answer 1

You have to set this to refer it: `

methods:{
  hit(){
    this.spin = true
  }

Answer 2

spin is a member of your component, so you need to access it from this:

methods:{
  hit(){
    this.spin = true
}