使计算的 Vue 属性依赖于当前时间?

Question

我有一个Events集合。这些将根据其状态呈现在列表中 - 即将推出/上线/上一个。因此，渲染取决于当前时间。如何使计算属性随着时间的推移进行更新/重新计算？

<template>
<div>
<h2>Upcoming events</h2>
<p v-bind:key="event.name" v-for="event in upcomingEvents">{{ event.name }}</p>
<h2>Live events</h2>
<p v-bind:key="event.name" v-for="event in liveEvents">{{ event.name }}</p>
<h2>Previous events</h2>
<p v-bind:key="event.name" v-for="event in previousEvents">{{ event.name }}</p>
</div>
</template>
<script>
import Event from '../Event.js'
export default {
data() {
return {
events: []
}
},
computed: {
upcomingEvents() {
return this.events.filter(event => event.isUpcoming())
},
liveEvents() {
return this.events.filter(event => event.isLive())
},
previousEvents() {
return this.events.filter(event => event.isPrevious())
},
},
mounted() {
// this.events are populated here 
}
}
</script>

Answer 1

您可以声明一个与时间相关的数据变量并使用setInterval()来更新它：

data() {
return {
events: [],
now: Date.now()
}
},
created() {
var self = this
setInterval(function () {
self.now = Date.now()
}, 1000)
},
computed: {
upcomingEvents() {
return this.events.filter(event => event.isUpcoming(this.now))
},
liveEvents() {
return this.events.filter(event => event.isLive(this.now))
},
previousEvents() {
return this.events.filter(event => event.isPrevious(this.now))
}
}

请注意，需要在计算属性中使用now来更新它们。

Answer 2

您可以创建一个每秒更新一次的时间变量，然后在计算属性中使用此变量。

new Vue({
el: "#app",
data: {
time: ''
},
computed: {
computedValue: function(){
return this.time;
}
},
mounted: function(){
var app = this;
setInterval(function(){
app.time = parseInt(new Date().getTime() / 1000);
}, 1000);
}
})

https://jsfiddle.net/ecwnvudz/

Answer 3

您的情况的一种可能性是 $forceUpdate((。但是，应该注意的是，它将专门针对您的情况工作，因为您没有使用子组件。

如果要使用子组件，则需要在父组件中使用slots，并将子组件插入其各自的插槽中。

因此，例如，您可以执行以下操作：

created() {
setInterval(() => {
this.$forceUpdate()
}, 5000)
}

这将导致整个组件重新渲染。这可能是也可能不是您正在寻找的理想交互。