Vue 2 Laravel 5.3 Infinte Update Loop

Question

コンソールログエラーはありませんが、updated()フック[現在のコードgetCartItems/]に入れたものは、私が知らない何らかの理由で無限にレンダリングされます。私はalert('hi')と設定してもそれを無限に警告します。だから私は何かがプロジェクトの値や何かを更新し続けていると思うが、私はどこにいるのかわからない。問題がどこにあるかを誰かに知らせることができますか？

カート-dropdown.vueあなたが更新フックにし、docsようVUEインスタンスのデータ変数cartsを更新している

<template> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row cart-dropdown-row" v-for="cart in carts"> 
       <div class="col-md-3"> 
        <div class="cart-dropdown-img-wrapper"> 
        <img class="d-flex align-self-center cart-dropdown-img" :src="cart.product_choice.img1" alt="Generic placeholder image"> 
        </div> 
       </div> 
       <div class="col-md-6 cart-dropdown-info-wrapper"> 
       <h6 class="cart-dropdown-info">{{cart.product.name}}</h6> 
       </div> 
       <div class="col-md-3 cart-dropdown-qty-wrapper"> 
       <div class="cart-dropdown-qty">x{{cart.qty}}</div> 
       </div> 
      </div> 
     </div> 
    <div class="row"> 

    </div> 
     <div class="row cart-dropdown-checkout-wrapper"> 
      <button type="button" class="btn btn-success btn-sm cart-dropdown-checkout" @click.prevent="goCheckout()">Check Out</button> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
    data(){ 
     return{ 
     carts:{}, 
     } 
    }, 
    props:[ 
    ], 
    mounted(){ 
     this.getCartItems() 
    }, 
    updated(){ 
     this.getCartItems() 
    }, 
    methods:{ 
     getCartItems(){ 
      var vm = this 
     vm.$http.get('/getCartItems/').then((response)=>{ 
      vm.carts = response.data 
     }); 
     }, 
     goCheckout(){ 
     window.location.href = 'http://localhost:8000/cart' 
     } 
    }, 
    computed:{ 
    } 
    } 
</script> 

Answer 1

は言う：データの変更は、仮想DOMが再されます後に更新フックがと呼ばれ、 - レンダリングとパッチ適用。あなたは無限ループに陥っています。それはDOMで更新されるvueデータを変更し、データを再度変更する更新ブロックを呼び出します。

これもdocsで言及されています

あなたはこのフックでDOM依存の操作を行うことができます。ただし、ほとんどの場合、このフックの状態を変更することは避けてください。は無限の更新ループにつながる可能性があるためです。

この円は、以下のvueインスタンスのライフサイクル図で確認できます。