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>

我在这里想念什么？我如何在卡片元素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>