VueJ에서 컴포넌트를 정기적으로 업데이트하려면 어떻게 해야 합니까?

VueJ에서 컴포넌트를 정기적으로 업데이트하려면 어떻게 해야 합니까?s

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>

나는 그 구성 요소를 렌더링하는 가게 암탉에서 무작위로 3개의 아이템을 선택하고, 반복하여 표시합니다.그러나 이것은 너무 정적인 것 같기 때문에 정기적으로 컴포넌트를 업데이트하여 아이템을 랜덤화 하고 싶습니다.

Vue2는 처음인데, 어떤 사소한 부분을 놓쳤는지 알고 계십니까?

사용 사례가 완전히 명확하지는 않지만 간격을 두고 랜덤화하려는 경우입니다.계산을 메서드로 변경하고 이 함수를 호출할 수 있습니다.setInterval.

아래 데모나 이 바이올린이 작동해야 합니다.

(데모에서는 이미지의 로딩이 느리다는 것을 배제하고 복잡함을 조금 줄였습니다.

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

언급URL : https://stackoverflow.com/questions/41706938/how-can-i-periodically-update-my-component-in-vuejs