Randomize/shuffle 页面加载时 Vue.js 中元素的顺序

Question

我正在尝试使用 Vuejs ref 属性定位一些元素，以随机化每个页面加载的顺序。

我的数据在模板中呈现并在组件中处理：

<div class="team" >
  <div class="team__card" ref="card" v-for="(member, index) in team"
  :key="index">
  <div v-for="(image, imageIndex) in member.image" :key="imageIndex">
    <img :src="image" alt="Photo of team member" :key="imageIndex" />
  </div>
  <div class="team__card-content">
    <p class="font-bold text-xl">{{ member.name }}</p>
    <p class="font-bold text-gray-700">{{ member.title }}</p>
    <p class="text-gray-700">{{ member.description }}</p>
  </div>
 </div>
</div>

<script>
export default {
name: 'Page Name',
data() {
 return {
  team: [
   {
     image: [require('url')],
     name: 'Name',
     title: 'Title',
     description:'description.'
   },
   {
     image: [require('url')],
     name: 'Name',
     title: 'Title',
     description:'description.'
   },
  ]
 }
},
created() {
    this.randomize()
  },
  methods: {
    randomize() {
      for (let i = this.team.length - 1; i > 0; i--) {
        let randomIndex = Math.floor(Math.random() * i)
        let temp = this.team[i]
        this.set(this.team, i, this.team[randomIndex])
        this.set(this.team, randomIndex, temp)
      }
    }
  }
}
</script>

我在这里错过了什么？我如何 shuffle/randomize 在我的卡片元素 TIA 的每个页面加载时订购！

Answer 1

您不应该像那样手动操作 DOM，因为 Vue 会在下一次更新期间覆盖它（假设 Vue 没有被这些更改弄糊涂）。

这些卡片似乎没有任何理由像模板中那样进行硬编码。您应该在组件数据中定义的数组中定义这些卡片的数据，然后使用 v-for 将其呈现出来，然后您所要做的就是 shuffle the array.

这是一个演示：

// This is an in-place array shuffle function which is
// compatible with arrays observed by Vue
function shuffleVueArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = array[i];
    Vue.set(array, i, array[j]);
    Vue.set(array, j, temp);
  }
}

new Vue({
  el: '#app',
  data: {
    items: [
      'apple',
      'banana',
      'orange',
      'pear',
      'pineapple',
      'mango',
    ],
  },
  methods: {
    randomize() {
      shuffleVueArray(this.items);
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="randomize">Randomize</button>
  <ul>
    <li v-for="item of items">{{ item }}</li>
  </ul>
</div>

Answer 2

this.set 调用在 set 之前缺少 $。如果没有 $，它将导致运行时错误，其中 set 不是函数。

this.$set(this.team, i, this.team[randomIndex])
this.$set(this.team, randomIndex, temp)

或者可以使用Vue.set；但是由于 set 在可以访问 Vue 实例的函数中被调用，因此 $set 将是首选。

工作示例：

https://codesandbox.io/s/eager-cori-cu75f

Randomize/shuffle 页面加载时 Vue.js 中元素的顺序

Randomize/shuffle order of elements in Vue.js on page load

javascript

arrays

dom

ref

vue.js