web-dev-qa-db-ja.com

コンポーネントのレンダリング関数に無限の更新ループがある場合があります

私はVueJSが初めてで、Vueから警告を受け取りました。

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

V-bind：styleでV-for変数を使用する場合の例を次に示します。

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

@Decadeは問題について正しいです。正確な問題は次のとおりです。

  1. 何らかの状態値を使用してアイテムのリストをレンダリングするrenderメソッドを使用しています

注：状態が変化すると、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,
        };
    },
}

お役に立てば幸いです！

15
aks

まず、あなたがnot_acceptを持っている理由がわかりません。代わりに!this.acceptを使用することはできませんか？

この警告が表示される理由は100％わかりませんが、ここに私が思うことを示します。

v-bind:classのウォッチャーは、item.result、this.accept、およびthis.not_acceptへの変更を監視しています。これらの値を変更すると、testを再度呼び出すことで再レンダリングされます。ただし、test内でthis.acceptとthis.not_acceptを変更しているため、Vueはそのために結果が変更された場合、再度確認する必要があります、そうすることでthis.acceptとthis.not_acceptagainなどを変更できます。

classバインディングとデータに欠陥があります。各アイテムのclassは同じものに設定されますが、item.resultに応じて各アイテムのカスタムスタイルが必要なように見えます。 this内のtestのプロパティを変更しないでください。

あなたのコンポーネントがどのように機能し、何をすべきなのか完全にはわからないので、完全な答えを出すのは難しいです。

9
Decade Moon

vueディレクティブで関数を渡す代わりに関数を呼び出すと、このエラーが発生する可能性があります。以下に例を示します。

カスタムを作成しました AJAX boostrapタブが表示されたときにデータをロードするためのディレクティブ 。

これは悪いです：

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

ここで、vueは、関数を呼び出す（または式を評価する）ように見え、結果をディレクティブに渡します。

これはいい：

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

ここでは、ディレクティブで呼び出すことができるように、名前で関数を渡します。

2
Jess