why Methods on function seems to not work on vue.js?

Question

I have created a method that is triggered with a button on:click event, but it doesn't seem to work.

There is the code :

<template>
  <div class=button>
        <button v-on:click="refreshTemperature"  type="button"  > Search </button>
        <p> Temperature : {{ temp }} </p>
  </div>
</template>

export default {
  name: 'Meteo',
  data() { 
    return {
      temp: Math.floor(Math.random() * (30 - 10) ) + 10,
  },
  methods: {
      refreshTemperature : () => {
           this.temp ++;
          
        }
}

When I click the button nothing happens, do you have any idea what I'm missing? I'm really new to Vue.js.

You're missing a }. There should be one to end the `methods` object — AlexH, Oct 21 '20 at 18:44
forgot it when i copyed the code but on my source there is the brackets ;) that's not the problem unfortunately @AlexH — kehalS, Oct 21 '20 at 18:46

wangdev87 · Accepted Answer · 2020-10-21T19:00:17.493

2

Don't use the arrow function, but the regular function. You can refer to this link.

<template>
  <div class=button>
        <button @click="refreshTemperature"  type="button"  > Search </button>
        <p> Temperature : {{ temp }} </p>
  </div>
</template>

<script>
export default {
  name: 'Meteo',
  data() { 
    return {
      temp: Math.floor(Math.random() * (30 - 10) ) + 10,
    }
  },
  methods: {
      refreshTemperature() {
           this.temp ++;
          
        }
  }
}
</script>

edited Oct 21 '20 at 19:00

answered Oct 21 '20 at 18:43

wangdev87

8,285
3
6
30

This is a good practice, but doesn't solve the problem – AlexH Oct 21 '20 at 18:44
Yeah that doesnt solve the problem – kehalS Oct 21 '20 at 18:46
I updated my code. please remove arrow function. – wangdev87 Oct 21 '20 at 18:50
You beat me! I just found that was the problem – AlexH Oct 21 '20 at 18:51
Oh ok so arrow function doesnt works on methods: ? i dont get why this declaration doesnt works if u can explain me @WilliamWang – kehalS Oct 21 '20 at 18:54
That's because an arrow function wouldn't bind `this` to the vue instance. You can check here more details. https://vuejs.org/v2/guide/instance.html#Data-and-Methods – wangdev87 Oct 21 '20 at 18:55
@WilliamWang great answer! I suggest adding the documentation link into the original answer for better visibility and context to future readers – Derek Pollard Oct 21 '20 at 18:59

why Methods on function seems to not work on vue.js?

1 Answers1