は、私は定期的にVueJS

Question

で私のコンポーネントを更新することができますどのように私はこのようになりますVueの中の成分を持っています。しかし、これはあまりにも静的なので、定期的にコンポーネントを更新してアイテムをランダム化してください。

私はVue2を初めて使用しています - 私が見逃していることは何ですか？

Answer 1

あなたのユースケースは私には完全にはっきりしていませんが、ある間隔でランダム化したいのですが。計算をメソッドに変更し、setIntervalでこの関数を呼び出すことができます。

以下のデモのようなもの、またはfiddleが動作するはずです。

（デモでは、私は複雑さを少し減らすために、画像の遅延ロードを削除しました。）

// 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>