Блог

У меня есть пользовательский класс, содержащий свойства, и мне интересно, как я могу обновить файл vue, чтобы отразить изменение свойств. Для простоты я уменьшил свой пользовательский класс (который я расширю в будущем, чтобы иметь больше свойств.

В этом примере я ожидаю, что btn изменит цвет и значок, когда пользователь нажмет на него, на основе свойства «Проигрывается» на моем секундомере пользовательского класса.

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>
 

секундомер.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();
    }
  }
}
 

Вместо computed этого используйте , reactive чтобы сделать Stopwatch реквизиты экземпляра реактивными:

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

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

ДЕМОНСТРАЦИЯ