Vue: значение таймера не обновляется при использовании setInterval
У меня есть следующий код для обновления количества прошедших секунд и его отображения:
<template>
<div>
{{timerValue}}
</div>
</template>
<script>
export default {
name: "App",
components: {
},
data() {
return {
timerValue: ""
}
},
created() {
let seconds = 0;
this.timerValue = seconds;
setInterval(function() {
seconds++;
})
}
};
</script>
Однако на странице всегда отображается
0
Что я делаю не так?
https://codesandbox.io/s/still-cache-1mdgr6?file=/src/App.vue
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вместо этого вы должны увеличить this.timerValueseconds
created() {
let seconds = 0;
this.timerValue = seconds;
setInterval(function() {
this.timerValue++;
}.bind(this))
}
Или с функциями стрелок
created() {
let seconds = 0;
this.timerValue = seconds;
setInterval(() => {
this.timerValue++;
})
}
Может быть, как следующий фрагмент:
const app = Vue.createApp({
data() {
return {
timerValue: 0 // set value default is 0
}
},
created() {
setInterval(() => {
this.timerValue++;
}, 1000)
}
})
app.mount('#demo')<script src = "https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id = "demo">
<div>
{{timerValue}}
</div>
</div>вот почему я всегда советую людям изучить логику языка или хотя бы javascript, прежде чем изучать что-то еще
вам нужно обновить значение реакции, потому что у javascript нет API, который позволяет назначать ячейки памяти
<script>
export default {
name: "App",
components: {
},
data() {
return {
timerValue: 0 // set default value is number
}
},
created() {
setInterval(() => {
this.timerValue++;
}, 1_000 /* delay 1s */)
}
};
</script>
Это больше проблема Vue (который является фреймворком, а не языком). И ваш код не будет отображать ничего, кроме нуля
я не думаю, что это проблема vue, вы не ссылаетесь на значение vue, а просто изменяете локальную переменную seconds
даже в javascript вы ничего не можете сделать с этим кодом, пока вы правы в javascript, вы будете правы в vue
У меня есть 3 момента, на которые вы должны обратить внимание
- В функции setInterval вы меняете только переменную
seconds, а неthis.timerValueвообще. Таким образом, страница всегда показывает 0. - Функция setInterval еще не имеет аргумента интервала, поэтому она не будет выполняться каждую секунду.
- Так же непонятно значение инициализации, думаю вам стоит понять логику программы и потратить немного времени на то, чтобы понять что вы написали.
<template>
<div>
{{timerValue}}
</div>
</template>
<script>
export default {
name: "App",
components: {
},
data() {
return {
timerValue: 0,
}
},
mounted() { // use mounted much better than created in this case
setInterval(() => {
this.timerValue++;
}, 1000)
}
};
</script>
ссылки: https://www.w3schools.com/jsref/met_win_setinterval.asp
Не получится: codeandbox.io/s/jolly-smoke-3dj65g?file=/src/App.vue В setInterval необходимо использовать функцию стрелки.
Я обнаружил две неправильные вещи в своем коде:
- Использование
thisвнутриfunction(). Следует использовать функцию стрелки, например:
setInterval(() => {}
this.timerValue = secondsнедостаточно для обновления VuetimerValueпри обновленииseconds. Изменение секунд не вызывает изменениеtimerValue.
Это можно решить, используя вычисляемое свойство:
computed: {
timerValue: function() {
return this.seconds;
}
},
Таким образом, весь код будет выглядеть так:
https://codesandbox.io/s/festive-cannon-8qvpn9?file=/src/App.vue
<template>
<div>
{{ timerValue }}
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
seconds: 0,
};
},
created() {
setInterval(() => {
this.seconds++;
}, 1000);
},
computed: {
timerValue: function () {
return this.seconds;
},
},
};
</script>
Я думаю, что функция стрелки должна использоваться. Когда я не использовал его, не было обновления