从 Class 对象属性更新 Vue

Question

我有一个包含属性的自定义 class，我想知道如何让我的 vue 文件更新以反映属性更改。为了简单起见，我精简了我的自定义 class（我将在未来扩展它以获得更多属性。

在这个例子中，我希望 btn 在用户点击它时根据我自定义的 class 秒表上的属性 'isPlaying' 改变颜色和图标。

main.vue

<template>
  <q-page padding class="text-center q-pa-md">
    <q-btn
        :color="sw.isPlaying ? 'red' : 'green'"
        :icon="sw.isPlaying ? 'mdi-pause' : 'mdi-play'"
        @click="sw.toggle()"
    />
  </q-page>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  onMounted,
  onUnmounted
} from '@vue/composition-api';
import Stopwatch from 'src/utils/stopwatch';

export default defineComponent({
  name: 'Stopwatch',
  components: {},
  setup() {
    const sw = computed(() => new Stopwatch());
    return {
      sw
    };
  }
});
</script>

stopwatch.ts

export default class Stopwatch {
  isPlaying: boolean;

  constructor() {
    this.isPlaying = false;
  }

  // Start timer or continue from paused time
  startTimer() {
    this.isPlaying = true;
    console.log('play');
  }

  // Stop/Pause the timer
  stopTimer() {
    this.isPlaying = false;
    console.log('stop');
  }

  // Start/Stop timer or continue from paused time
  toggle() {
    if (this.isPlaying) {
      this.stopTimer();
    } else {
      this.startTimer();
    }
  }
}

Answer 1

而不是computed，使用reactive使Stopwatch实例的道具具有反应性：

import { defineComponent, reactive } from '@vue/composition/api'

export default defineComponent({
  setup() {
    const sw = reactive(new Stopwatch());
    return {
      sw
    };
  }
});

demo

从 Class 对象属性更新 Vue

Update Vue from Class Object property

typescript

vue.js

vue-composition-api

从 Class 对象 属性 更新 Vue

Update Vue from Class Object property

typescript

vue.js

vue-composition-api

从 Class 对象属性更新 Vue