У меня есть компонент, значение которого постоянно меняется. Однако, когда он скрыт с переходом, он перестает обновлять значение, а это не то поведение, которое мне нужно.
Проверьте эту скрипку или этот фрагмент:
var demo = new Vue({
el: '#demo',
data: {
visible: true,
counter: 0
},
created: function() {
setInterval(function() {
this.counter++;
}.bind(this), 200);
}
});
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: 2s ease;
}
[v-cloak] {
display: none;
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo" v-cloak>
<p>Value: {{ counter }}</p>
<transition name="fade">
<p v-if="visible">Transition: {{ counter }}</p>
</transition>
<button @click="visible = !visible">
Transition!
</button>
</div>
Как вы можете видеть, когда вы нажимаете кнопку, исчезающий абзац останавливается на текущем значении счетчика, а другой продолжает обновляться. Как этого избежать? Я хочу, чтобы исчезающий абзац прекратил обновлять значение только тогда, когда оно полностью скрыто, когда переход завершен.