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

我的问题是，当我单击该按钮时，我可以看到控制台中的计数器在增加，但该组件不会重新呈现，因此浏览器中的 '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

这里有几个问题：

我们需要传递函数引用，而不是直接调用函数：
```
<button v-on:click="increment">
```
接下来，如docs中所述，组件方法可以声明为实例方法，如：
```
increment() {
   this.counter++;
};
```

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

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

Vue - Component won't re-render when updating data with a method

methods

components

render

typescript

vue.js