typescript - Vue - 使用方法更新数据时组件不会重新渲染

我有一个非常简单的 Vue 组件，看起来是这样的：

<template>
  <div class="incrementor">
    <p v-text="counter"></p>
    <button v-on:click="increment()">Increment</button>
  </div>
</template>

<script lang="ts" src="../scripts/incrementor.ts"></script>
<style lang="scss" src="../styles/incrementor.scss"></style>

这是我的 'incrementor.ts' 脚本文件：

import { Component, Vue, Prop } from "vue-property-decorator";

@Component({})
export default class Incrementor extends Vue {
  private counter: number = 0;

  increment = () => {
    this.counter++;
  };
}

我的问题是，当我点击按钮时，我可以在控制台看到计数器在增加，但组件没有重新渲染，所以浏览器中的‘counter’文本保持为0。

我知道我可以这样做：

<template>
  <div class="incrementor">
    <p v-text="counter"></p>
    <button v-on:click="counter++">Increment</button>
  </div>
</template>

<script lang="ts" src="../scripts/incrementor.ts"></script>
<style lang="scss" src="../styles/incrementor.scss"></style>

它有效，但我希望能够使用我自己的方法来做这件事。

答案＃1

这里有几个问题：

1. 我们需要传递函数引用，而不是直接调用函数，如下所示：

    <button v-on:click="increment">
   

2. 接下来，如文档中所述，组件方法可以声明为实例方法，如下所示：

    increment() {
       this.counter++;
    };
   

在实施这些更改之后，增量计数器将正常工作。