Quasar变量未更新

Question

为什么我的quasar变量'offset‘没有在UI中更新，而控制台中的打印值却更新了？我猜我没有正确使用Ref或计算属性。该变量根据计时器进行更新(递增)。

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

Answer 1

对于组合应用程序接口中的反应变量，您需要使用ref方法，您已经导入了该方法。您需要像这样初始化变量：

let offset = ref('0px')

然后，您可以像使用value属性一样修改此变量：

offset.value = `${position}px 0px`;