I have a ponent 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',
  puted: {
    toplist () {
      return _.sampleSize(this.$store.state.toplist, 3)
    }
  },
  methods: {
    poster: function (item) {
      return '/' + item.backdrop_path
    },
    url: function (item) {
      return '/' + item.id
    }
  }
}
</script>

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

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

I have a ponent 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',
  puted: {
    toplist () {
      return _.sampleSize(this.$store.state.toplist, 3)
    }
  },
  methods: {
    poster: function (item) {
      return 'https://example./' + item.backdrop_path
    },
    url: function (item) {
      return 'http://example./' + item.id
    }
  }
}
</script>

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

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

• javascript
• vue-ponent
• vuejs2
• vue.js

• 1 Could you please explain issue a bit more ? It's not totally clear to me.You are getting 3 items from store, then in puted property you apply some unknown method for me from lodash and then iterate over it.What you want to achieve ? – Belmin Bedak Commented Jan 17, 2017 at 21:26
• @BelminBedak sorry for not being explicit enough. The accepted answer below illustrates my question. – Mridang Agarwalla Commented Jan 18, 2017 at 14:36

1 Answer 1

Your use-case is not pletely clear to me but if you'd like to randomize with an interval. You could change your putation 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 plexity 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',
  puted: {
    /*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./' + item.backdrop_path
      },
      url: function(item) {
        return 'http://example./' + item.id
      }
  }
}

new Vue({
  el: '#app',
  template: '<div><random-items></random-items</div>',
  store,
  ponents: {
    randomItems
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/vuex/2.1.1/vuex.js"></script>
<script src="https://cdnjs.cloudflare./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>