typescript - Vue - Bir metodla veri güncellendiğinde bile bileşen yeniden render edilmiyor

Benim şöyle görünen çok basit bir Vue bileşenim var:

<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>

Bu benim 'incrementor.ts' betik dosyam:

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

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

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

Benim problemim, butona tıkladığımda sayacın konsolda arttığını görebilmem ama bileşenin yeniden render edilmemesi, bu yüzden tarayıcıda 'counter' metninin 0 olarak kalması.

Bunun gibi yapabileceğimi biliyorum:

<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>

Ve işe yarıyor ama bunun için kendi yöntemlerimi kullanabilmek istiyorum.

Cevap #1

Burada birkaç sorun var:

1. Fonksiyonu doğrudan çağırmak yerine, fonksiyon referansını şu şekilde geçmemiz gerekiyor:

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

2. Daha sonra, belgelerde belirtildiği gibi, bileşen yöntemleri şu şekilde örnek yöntemler olarak ilan edilebilir:

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

Bu değişiklikleri uyguladıktan sonra, artış sayacı düzgün çalışacaktır.