Как случайным образом выбрать определенное количество элементов из массива, используя v-for?

Question

Я хочу случайным образом выбрать конкретное количество элементов из массива на основе пользовательского ввода. Массив выглядит так:

arr: [
1.png, 2.png, 3.png, ..., 100.png
]

У меня есть метод тасования массива, когда пользователь нажимает кнопку "Создать". Однако я не знаю, как я могу контролировать количество предметов, используя v-for. Если я сделаю <img v-for="n in arr" :key="n" :src="/static/images/${n}.png">Я просто получу весь массив.

Answer 1

Вы можете воспользоваться Vue.js, чтобы определить computed свойство называется subArray следующим образом:

       data(){
       return{
        ... 
       userInputValue:this.arr.length //by default get all the array, this property 
        }                              // is bound to input, it can be changed 
       }
      computed:{
         ...
         subArray(){
             return this.arr.splice(0,this.userInputValue);
          }
       }

в вашем шаблоне:

  <img v-for="n in subArray" :key="n" :src="/static/images/${n}.png">

Примечание: не помещайте свою логику в шаблон, это не очень хорошая практика, поэтому держите ее в своем скрипте