Почему моя переменная квазара '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>