如何在 Vue.js 中的 v-for 期間為給定數組中的數據屬性分配隨機值？

Question

在我的主要 Vue 實例上，我有一個數據屬性，它是一個數組。 它有4個項目：

var app = new Vue({
            el: '#app',
            efeitosAos: ['fade', 'flip-up', 'slide-up', 'zoom-in'],
            aos: 'fade-in'
}

如您所見，它具有來自AOS庫的效果名稱。 我的想法是從中獲取一個隨機值並將其傳遞給我的一個組件。

每個組件都在v-for 中調用：

<post v-for="post, index in posts" :key="post.id" :post="post" :efeito="aos">
    {{randomizaAos()}}
</post>

這是我的組件：

const post = {
   data: function(){
        return {
            duration: 1000,
            delay: 50,
        }
    },

    props: {
        efeito: '',
        post: {
            id: '',
            titulo: '',
            resumo: '',
            imagem: '',
        },
    },
    template: '\
        <section class="guarda-post" :data-aos="efeito" :data-aos-duration="duration" :data-aos-delay="delay">\
        <img :src="post.imagem" class="img-fluid">\
        <h4 class="titulo-post">{{post.titulo}}</h4>\
        <p>{{post.resumo}}</p>\
        </section>'
};

在我的組件上，我有一個名為efeito的道具。 它應該接收我的數據aos的值，它來自我的主 Vue 實例。 我的想法是用一種方法來改變這個 aos 數據。 到目前為止，我得到了這個：

methods:{
        randomizaAos: function(){
           var efeitoAleatorio = Math.floor(Math.random() * this.efeitosAos.length);
           this.aos = this.efeitosAos[efeitoAleatorio];
           console.log(this.aos);
        }
}

問題是當我運行randomizaAos方法時，我得到一個無限循環，我不知道為什么。 這很奇怪，因為如果我只在方法中保留 console.log，我會收到 4 條消息，這正是我的posts數組的大小。 但是當我使用 Math 的東西並將找到的值提供給我的 aos 數據時，我得到了無限循環。 這是為什么？ 有什么幫助嗎？

Answer 1

在mounted方法中設置efeito prop的值，這樣就不會每次都重新渲染