[Vuejs]-Trying to set different arrays depending on value. Error: You may have an infinite update loop in a component render function

by

1👍

✅

Yes! Your component will be re-rendered infinitely.

When rendering, :texts="texts(form.rank)" to get the results you called a method with param.

In that method, you updated the ranktexts in the data. Updating ranktexts will make the component to re-render.

So rendering again.

render -> texts(form.rank) -> updating ranktexts -> render

To solve this. I think there’s no need to use ranktexts.

Just return array.

texts(rank) {
    if (rank === 3) {
       return ['Mal', 'Indiferente', 'Bueno'];
    }
    if (rank === 4) {
       return ['Mal', 'Indiferente', 'Bueno', 'Excelente'];
    }
    if (rank === 5) {
       return ['Muy Mal', 'Mal', 'Indiferente', 'Bueno', 'Excelente'];
    }
    return ['Muy Mal', 'Mal', 'Indiferente', 'Bueno', 'Muy Bueno', 'Excelente'];
}
👤Diamond

Leave a comment