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

Question

我试图根据另一个值将此数组设置为不同的东西并得到错误

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

我在 vue data() 中将数组设置为空，

ranktexts: [],

然后在我使用此代码的方法中

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

这就是我所说的

<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>

Answer 1

是的！您的组件将无限重新渲染。

渲染时，:texts="texts(form.rank)" 为获得结果调用了带参数的方法。

在该方法中，您更新了数据中的 ranktexts。更新 ranktexts 将使组件重新渲染。

所以重新渲染。

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

解决这个问题。我认为没有必要使用 ranktexts.

只是 return 个数组。

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

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

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

laravel

vue.js

element-ui