我怎样才能在 VueJS 中定期更新我的组件

Question

我在 Vue 中有一个如下所示的组件：

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

我从 store hen 渲染组件中随机选择三个项目，迭代并显示。但是，这似乎太静态了，所以我想定期更新组件，以便它再次随机化项目。

我是 Vue2 的新手 - 对我遗漏的细节有什么想法吗？

Answer 1

你的 use-case 对我来说并不完全清楚，但如果你想用一个时间间隔随机化。您可以将计算更改为方法并使用 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>

我怎样才能在 VueJS 中定期更新我的组件

How can I periodically update my component in VueJS

javascript

vue.js

vue-component

vuejs2