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

0
votes

I'm trying to set this array to different thing depending on another value and get the error

[Vue warn]: You may have an infinite update loop in a component render function.

I'm setting up the array as empty in the data() in the vue, 

ranktexts: [],

and then in the methods i'm using this code

texts(rank) {
    if (rank === 3) {
        this.ranktexts = ['Mal', 'Indiferente', 'Bueno'];
    } else if (rank === 4) {
        this.ranktexts = ['Mal', 'Indiferente', 'Bueno', 'Excelente'];
    } else if (rank === 5) {
        this.ranktexts = ['Muy Mal', 'Mal', 'Indiferente', 'Bueno', 'Excelente'];
    } else {
        this.ranktexts = ['Muy Mal', 'Mal', 'Indiferente', 'Bueno', 'Muy Bueno', 'Excelente'];
    }
},

This is where I'm calling it 

<div class="question_reply" v-if="form.response_type_id === 3">
    <el-form-item>
        <el-rate v-model="value"
            :max="form.rank"
            :texts="texts(form.rank)"
            show-text
            allow-half
        ></el-rate>
    </el-form-item>
1
laravelvue.jselement-ui

1 Answers

1
votes

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'];
}