How can I periodically update my component in VueJS

Question

I have a component in Vue that looks like this:

<template>
  <div id="featured_top">
    <i class="i-cancel close"></i>
    <div v-for="item in toplist">
      <div class="featured-item" v-lazy:background-image="poster(item)">
        <a class="page-link" :href="url(item)" target="_blank">
          <h4 class="type"> Featured Movie </h4>
          <div class="title">{{ item.title }}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
const _ = require('lodash')

export default {
  name: 'featured',
  computed: {
    toplist () {
      return _.sampleSize(this.$store.state.toplist, 3)
    }
  },
  methods: {
    poster: function (item) {
      return 'https://example.com/' + item.backdrop_path
    },
    url: function (item) {
      return 'http://example.com/' + item.id
    }
  }
}
</script>

I choose three random items from the store hen rendering the component, iterate over and display then. However, this seems too static so I'd like periodically update the component so it randomises the items again.

I'm new to Vue2 - any ideas on what trivial bit I'm missing?

Answer 1

Your use-case is not completely clear to me but if you'd like to randomize with an interval. You could change your computation to a method and call this function with setInterval .

Something like in the demo below or this fiddle should work.

(In the demo I've removed the lazy loading of the image to reduce the complexity a bit.)

 // const _ = require('lodash') const testData = _.range(1, 10) .map((val) => { return { title: 'a item ' + val } }) const store = new Vuex.Store({ state: { toplist: testData } }) //export default { const randomItems = { name: 'featured', template: '#tmpl', computed: { /*toplist () { return _.sampleSize(this.$store.state.toplist, 3) }*/ }, created() { this.getToplist() // first run this.interval = setInterval(this.getToplist, 2000) }, beforeDestroy() { if (this.interval) { clearIntervall(this.interval) this.interval = undefined } }, data() { return { interval: undefined, toplist: [] } }, methods: { getToplist() { this.toplist = _.sampleSize(this.$store.state.toplist, 3) }, poster: function(item) { return 'https://example.com/' + item.backdrop_path }, url: function(item) { return 'http://example.com/' + item.id } } } new Vue({ el: '#app', template: '<div><random-items></random-items</div>', store, components: { randomItems } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> <div id="app"> </div> <script type="text/template" id="tmpl"> <div id="featured_top"> <i class="i-cancel close"></i> <div v-for="item in toplist"> <div class="featured-item" v-lazy:background-image="poster(item)"> <a class="page-link" :href="url(item)" target="_blank"> <h4 class="type"> Featured Movie </h4> <div class="title">{{ item.title }}</div> </a> </div> </div> </div> </script>