web-dev-qa-db-fra.com

Vous pouvez avoir une boucle de mise à jour infinie dans une fonction de rendu de composant

Je suis nouveau dans VueJS, j'ai un avertissement de Vue, 

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

Lorsque j'utilise V-for variable dans V-bind: style, voici un exemple: Dans le modèle: 

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

dans le script:

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,
        };
    },
},
node.jsvue.jsvuejs2
10
ramzi trabelsi

@ Decade a raison sur le problème. Voici le problème exact:

  1. Vous êtes dans la méthode de rendu rendant la liste des éléments en utilisant une valeur d'état

NOTE: la méthode de rendu est déclenchée à chaque changement d'état

  1. Ensuite, vous essayez de lier la classe en fonction du résultat de la fonction test. Cette fonction est défectueuse car elle tente à nouveau de muter l’état, provoquant ainsi le cycle de rendu - test - rendu.

Vous pouvez résoudre ce problème en faisant en sorte que votre fonction de test ne mute pas l'état à la place, comme suit:

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

J'espère que ça a aidé!

7
aks

Premièrement, je ne suis pas sûr de savoir pourquoi vous avez not_accept, ne pouvez-vous pas simplement utiliser !this.accept à la place?

Je ne suis pas sûr à 100% pourquoi vous recevez cet avertissement, mais voici ce que je pense.

L'observateur de v-bind:class surveille les modifications apportées à item.result, this.accept et this.not_accept. Toute modification de ces valeurs entraînera son restitution en appelant à nouveau test. Mais dans test, vous modifiez this.accept et this.not_accept, donc Vue doit vérifier à nouveau si le résultat a changé à cause de cela et, ce faisant, il pourrait changer this.accept et this.not_acceptà nouveau, etc.

La liaison class et les données sont erronées. class pour chacun des éléments sera défini sur la même chose, mais il semble que vous souhaitiez un style personnalisé pour chaque élément en fonction de item.result. Vous ne devriez vraiment pas modifier les propriétés de this dans test.

Il est difficile de donner une réponse complète car je ne suis pas tout à fait sûr du fonctionnement de votre composant et de ce qu'il devrait faire.

7
Decade Moon

Vous pouvez obtenir cette erreur si vous appelez une fonction au lieu de la transmettre dans une directive vue. Voici un exemple:

J'ai créé une directive personnalisée pour charger les données via AJAX lorsqu'un onglet boostrap est affiché .

C'est mauvais:

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

Ici, vue semble appeler la fonction (ou plutôt évaluer l'expression) et transmettre le résultat à la directive.

C'est bon:

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

Ici, je passe la fonction par son nom de sorte que je puisse l'appeler dans la directive.

0
Jess