javascript - How can I periodically update my component in VueJS - Stack Overflow

admin管理员组

文章数量:1430732

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

Share Improve this question Follow asked Jan 17, 2017 at 21:03 Mridang AgarwallaMridang Agarwalla 45.2k7474 gold badges238238 silver badges396396 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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>

本文标签： javascriptHow can I periodically update my component in VueJSStack Overflow