如何在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 的 prop。它应该接收我的数据 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 数组的大小。但是当我使用数学的东西并将找到的值提供给我的aos数据时，我得到了无限循环。这是为什么？有什么帮助吗？

Answer 1

在mounted方法中设置efeito prop的值，不会每次都重新渲染