Question

我正在尝试根据另一个值将此数组设置为其他内容并获取错误

[Vue警告]：组件渲染函数中可能存在无限的更新循环。

我正在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将使组件重新呈现。

再次渲染。

渲染->文本（form.rank）->更新等级文本->渲染

要解决此问题。我认为没有必要使用ranktexts。

仅返回数组。

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

尝试根据值设置不同的数组。错误：组件渲染函数中可能存在无限更新循环

1 个答案: