Why do methods on a function seem 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. What am I missing?

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

score 2 · Accepted Answer · edited Jul 17 '22 at 23:41

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 Jul 17 '22 at 23:41

tony19

125,647
18
229
307

answered Oct 21 '20 at 18:43

wangdev87

8,611
3
8
31

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 do methods on a function seem to not work on vue.js?

1 Answers1