Как в Vue перемешать полученные данные axios?

Question

[geometria]

Вот мой код Vue, который выводит по порядку (по id) 14 первых записей из БД.
Как мне отобразить эти данные рандомно?

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                     <div class="card-body">
                        <div
                     v-if="product.id < 15 "
                     v-for="product in products" class="row product-row">
                            <div class="col-md-4">
                                <img :src="product.picture" :alt="product.name">
                            </div>
                             <div class="col-md-8">
                                 <p><b>{{ product.name }}</b></p>
                                 <p>{{ product.price }}</p>
                                 <p>{{ product.description }}</p> 
                             </div>
                         </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import axios from 'axios'
export default {
        data() {
            return {
                products: [],
            }
        },

mounted() 
{ 
let vm = this
vm.getProducts(); 
}, 

methods: {
getProducts() {
                let vm = this
                axios.get('/api/products')
                    .then(function(response) {
                        vm.products = response.data.data  
                    })
           },
      },
}
</script>

Comments

[Александр]

https://bost.ocks.org/mike/shuffle/

Answer 1

[Сергей Соколов]

Полученный массив перемешать сразу при получении:

// вместо
vm.products = response.data.data  

// так:
vm.products = response.data.data.sort((a,b) => Math.random() - 0.5)

Comments

[geometria]

Спасибо.
А подскажите пожалуйста еще такую вещь,
почему такая конструкция выдает только последний номер, а не все id, как предполагалось?
v-if="product.id === (8, 5, 1, 23, 12) "

[Сергей Соколов]

geometria, через запятую – это список выражений.
Список в скобках вернёт значение последнего выражения.

Список используется, например, в циклах:

for (let i = 0, j = 100, k = 1000; i < 5; i++, j+=20, k+=30) { ...

Если вам требуется показывать только, когда product.id – один из списка, то это так:

v-if="[8, 5, 1, 23, 12].indexOf(product.id) !== -1"

! хардкодить значения – плохая практика.

[Сергей Соколов]

https://vuejs.org/v2/guide/list

С телефона неудобно писать код. Документация поможет