如何在 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的值，这样就不会每次都重新渲染