Блог

Я просто работал над переходами vue и наткнулся на одну вещь, которую я не понимаю.

Я хочу отобразить список, который продолжает перетасовываться. Для этого я написал функцию shuffle(), которая вызывается каждые 2000 мс. В конце функции я присваиваю переменной перетасованный новый массив this.items . Однако список в DOM не перемешивается! Если я предварительно инициализируюсь this.items как пустой массив, список будет перетасован!

Вы можете увидеть это в функции shuffle (), показанной ниже. Если я удалю строку с this.items = [] помощью , перетасовка не сработает.

Я был бы счастлив, если бы кто-нибудь мог мне это объяснить.

Это html-часть кода:

 <transition-group name="flip-list" tag="ul">
          <li v-for="item in items" :key="item">
                    {{ item }}
          </li>
</transition-group>
 

Это часть js:

 <script>
export default {
  data () {
    return { items: [1, 2, 3, 4, 5, 6, 7, 8, 9] }
  },
  created () {
    setInterval(() => {
      this.shuffle()
    }, 2000)
  },
  methods: {
    shuffle () {
      const result = this.items
      let currentIndex = result.length
      let randomIndex

      // While there remain elements to shuffle...
      while (currentIndex !== 0) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex)
        currentIndex--

        // And swap it with the current element.
        [result[currentIndex], result[randomIndex]] = [
          result[randomIndex], result[currentIndex]]
      }
      this.items = []
      this.items = result
    }
  }
}

</script>