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

一种可能的情况是$forceUpdate()。但是，应该注意的是，它会根据您的情况专门工作，因为您不使用子组件。

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

例如，您可以这样做：

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

这将导致整个组件重新渲染。这可能是您想要的交互，也可能不是。

Answer 3

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

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/

使计算的Vue属性取决于当前时间？

3 个答案: