为什么函数上的方法似乎不适用于 vue.js？ [复制]答案

【问题标题】：why Methods on function seems to not work on vue.js? [duplicate]为什么函数上的方法似乎不适用于 vue.js？ [复制]
【发布时间】：2021-02-04 17:34:47
【问题描述】：

我创建了一个由按钮on:click 事件触发的方法，但它似乎不起作用。

有代码：

<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 ++;
          
        }
}

当我点击按钮时，什么也没有发生，你知道我错过了什么吗？我真的是 Vue.js 的新手。

【问题讨论】：

你少了一个}。应该有一个结束methods对象
我在复制代码时忘记了它，但在我的源代码中有括号；）不幸的是，这不是问题@AlexH

标签： javascript vue.js button

【解决方案1】：

不要使用箭头函数，而是使用常规函数。可以参考这个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>

【讨论】：

这是一个很好的做法，但不能解决问题
是的，这并没有解决问题
我更新了我的代码。请移除箭头功能。
你打败了我！我刚刚发现这是问题
哦，好吧，所以箭头功能不适用于方法：？我不明白为什么这个声明不起作用，如果你能解释我@WilliamWang