У вас может быть бесконечный цикл обновления в функции рендеринга компонента

Я новичок в VueJS, у меня есть предупреждение от Vue,

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

когда я использую V-для переменной в v-bind:style, вот пример : в шаблоне : 

<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>

в скрипт :

data() {
    return {
        accept: false,
        not_accept: false,
    };
},
methods: {
    test(result) {
        if (result == 'accept') {
            this.accept = true;
            this.not_accept = false;
        } else if (result == 'Not accept') {
            this.accept = false;
            this.not_accept = true;
        } else {
            console.log(result);
        }

        return {
            success: this.accept,
            danger: this.not_accept,
        };
    },
},
8
node.js vue.js vuejs2

3 ответов

@Decade прав насчет проблемы. Вот точная проблема:

  1. вы находитесь в методе рендеринга рендеринга списка элементов, используя некоторое значение состояния

Примечание: метод render вызывается при любом изменении состояния

  1. тогда вы пытаетесь связать класс на основе результата функции test эта функция ошибочна, поскольку она снова пытается мутировать состояние, вызывая тем самым рендер-тест-рендеринг ездить на велосипеде.

вы можете решить эту проблему, сделав тестовую функцию не мутировать состояние вместо этого, например:

methods: {
    test(result) {
        let accept;
        if (result == 'accept') {
            accept = true;
        } else if (result == 'Not accept') {
            accept = false;
        } else {
            console.log(result);
        }

        return {
            success: accept,
            danger: !accept,
        };
    },
}

надеюсь, это помогло!

5

во-первых, я не уверен, почему вы not_accept, вы не можете просто использовать !this.accept на его месте?

я не 100% уверен, почему вы получаете это предупреждение, но вот что я думаю.

наблюдатель за v-bind:class наблюдает за изменениями item.result, this.accept и this.not_accept. Любое изменение этих значений приведет к его повторному отображению с помощью вызова test снова. Но внутри!--6-->, вы изменяете this.accept и this.not_accept, поэтому Vue необходимо еще раз проверить, изменился ли результат из-за этого, и при этом это может измениться this.accept и this.not_accept снова и так далее.

на class привязка и данные имеют недостатки. class для каждого из элементов будет установлено то же самое, но похоже, что вы хотите пользовательский стиль для каждого элемента в зависимости от item.result. Вы действительно не должны изменять какие-либо свойства this внутри test.

трудно дать подробный ответ, потому что я не совсем уверен, как ваш компонент работает и что он должен делать.

5

вы можете получить эту ошибку, если вы вызываете функцию вместо передачи функции в директиве vue. Вот пример:

Я сделал заказ директива для загрузки данных через AJAX, когда отображается вкладка boostrap.

это плохо:

 v-on-show-bs-tab="getFirstPageSites()"

здесь vue, похоже, вызывает функцию (или, скорее, оценивает выражение) и передает результат директиве.

это хорошо:

 v-on-show-bs-tab="getFirstPageSites"

здесь я передаю функцию название такое, что я могу назвать его в директиве.

0