Переменная Quasar не обновляется

Почему моя переменная квазара 'offset' не обновляется в пользовательском интерфейсе, хотя напечатанное значение в консоли обновляется? Я предполагаю, что я неправильно использую свойства Ref или Computed. Переменная обновляется (увеличивается) на основе таймера.

<template>
  <div
    class="viewport"
    style="
      width:320px;
      height:180px;
      background:red;
      position: relative;
      overflow:hidden;"
  >
    offset: {{ offset }}
  </div>
</template>

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

export default defineComponent({
  name: 'Filmstrip',
  components: {},
  props: {
    src: {
      type: String,
      required: true
    }
  },
  setup(props, { emit, root }) {
    const { src } = props;

    const timer = null;
    let position = 0;
    let offset = '0px';
    const imageWidth = 10880;
    const frameWidth = 320;
    const fps = 60;
    const intervalTime = Math.round(1000 / fps) | 0;

    const runPlayer = () => {
      timer = setInterval(function() {
        position = Math.abs(position - 320) >= imageWidth ? 0 : position - 320;
        offset = `${position}px 0px`;
        console.log(offset);
      }, intervalTime);
    };

    onMounted(() => {
      runPlayer();
    });

    onUnmounted(() => {
      clearInterval(timer);
    });

    return { offset };
  }
});
</script>

<style lang="scss" scoped></style>

person JokerMartini    schedule 09.12.2020    source источник


Ответы (1)


Для реактивных переменных в composer-api вам нужно использовать метод ref, который вы уже импортировали. Вам нужно инициализировать переменную следующим образом:

let offset = ref('0px')

И затем вы можете изменить эту переменную, например, используя свойство value:

offset.value = `${position}px 0px`;
person David Go    schedule 09.12.2020