Vue-使用方法更新数据时组件不会重新呈现

Question

我有一个非常简单的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++;
  };
}

我的问题是，当我单击按钮时，我可以在控制台中看到计数器增加，但是组件没有重新呈现，因此浏览器中的“计数器”文本保持为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>

并且它有效，但是我希望能够使用自己的方法。

Answer 1

这里的几个问题：

1. 代替直接调用函数，我们需要传递函数引用，例如：

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

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

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

执行这些更改后，增量计数器将正常工作。