In my main Vue instance, I have a data attribute that consists of an array containing 4 items:
var app = new Vue({
el: '#app',
efeitosAos: ['fade', 'flip-up', 'slide-up', 'zoom-in'],
aos: 'fade-in'
}
This array contains the names of effects from the AOS library. My goal is to randomly select a value from this array and pass it to one of my components.
Each component is called within a v-for:
<post v-for="post, index in posts" :key="post.id" :post="post" :efeito="aos">
{{randomizaAos()}}
</post>
Below is the structure of my component:
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>'
};
Within my component, there is a prop named efeito, which should receive the value of my data attribute aos from the main Vue instance. To handle this, I've implemented a method as follows:
methods:{
randomizaAos: function(){
var efeitoAleatorio = Math.floor(Math.random() * this.efeitosAos.length);
this.aos = this.efeitosAos[efeitoAleatorio];
console.log(this.aos);
}
}
The issue arises when I execute the randomizaAos method - it triggers an infinite loop, and I'm unsure why. Strangely enough, if I only include the console.log statement inside the method, I get exactly 4 messages, corresponding to the size of my posts array. However, once I introduce the Math calculations and assign the found value to my aos data, the method gets stuck in an infinite loop. What could be causing this behavior? Any insights would be appreciated.