Попытка установить разные массивы в зависимости от значения. Ошибка: у вас может быть бесконечный цикл обновления в функции рендеринга компонента - PullRequest
Новая
       7

Попытка установить разные массивы в зависимости от значения. Ошибка: у вас может быть бесконечный цикл обновления в функции рендеринга компонента

0 голосов
/ 21 октября 2019

Я пытаюсь установить этот массив на другое значение в зависимости от другого значения и получить ошибку

[Vue warn]: у вас может быть бесконечный цикл обновления в функции рендеринга компонента.

Я устанавливаю массив как пустой в data() в vue, 

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>

1 Ответ

1 голос
/ 21 октября 2019

Да! Ваш компонент будет визуализироваться бесконечно.

При рендеринге :texts="texts(form.rank)" для получения результатов вы вызвали метод с параметром.

В этом методе вы обновили ranktexts вданные. Обновление ranktexts сделает компонент для повторного рендеринга.

Итак, рендеринг снова.

render -> тексты (form.rank) -> обновление ranktexts -> render

Чтобы решить это. Я думаю, что нет необходимости использовать 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'];
}
...