Случайный / случайный порядок элементов в Vue. js при загрузке страницы - PullRequest
Новая
       46

Случайный / случайный порядок элементов в Vue. js при загрузке страницы

1 голос
/ 17 марта 2020

Я пытаюсь настроить таргетинг на некоторые элементы с атрибутом 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!

Ответы [ 2 ]

1 голос
/ 18 марта 2020

В вызове 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

1 голос
/ 17 марта 2020

Вы не должны манипулировать DOM вручную подобным образом, потому что Vue просто переопределит его во время следующего обновления (при условии, что Vue не будет смущен этими изменениями).

Это не ' Кажется, есть какая-то причина, почему эти карты должны быть жестко закодированы в шаблоне. Вы должны определить данные для этих карт в массиве, который вы определили в данных компонента, затем обработать их, используя v-for, тогда все, что вам нужно сделать, это перемешать массив .

Вот демо: 

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