Сделать вычисленные свойства Vue зависимыми от текущего времени? - PullRequest
Новая
       15

Сделать вычисленные свойства Vue зависимыми от текущего времени?

0 голосов
/ 16 октября 2018

У меня есть коллекция 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>

Ответы [ 3 ]

0 голосов
/ 16 октября 2018

Одна возможность для вашего случая - $ forceUpdate () .Однако следует иметь в виду, что он будет работать специально для вашего случая, потому что вы НЕ используете дочерние компоненты.

Если бы вы использовали дочерние компоненты, вам нужно было бы использовать slots внутри родительского компонента и вставьте дочерние элементы в соответствующие им слоты.

Так, например, вы можете сделать: 

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

, что приведет к повторному рендерингу всего компонента.Это может быть или не быть желаемым взаимодействием, которое вы ищете.

0 голосов
/ 16 октября 2018

Вы можете создать переменную времени, которая будет обновляться каждую секунду, а затем использовать эту переменную в ваших вычисленных свойствах. 

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/

0 голосов
/ 16 октября 2018

Вы можете объявить переменную данных, зависящую от времени, и использовать 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 в вычисляемых свойствах для их обновления.

...