Vue 2 Laravel 5.3 Infinte Update Loop

Question

Ошибка консольного журнала, но все, что я положил в updated(), крючок [в текущем коде getCartItems/] будет отображаться бесконечно по некоторым причинам, которые я не знаю. даже я установил его как alert('hi'), и он предупреждает его бесконечно. Поэтому я подозреваю, что что-то заставляет проект постоянно обновлять ценности или что-то, но я не знаю, где. Может ли кто-нибудь дать мне предложение проверить, где проблема?

Корзина-dropdown.vue

<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

Вы обновляете переменную carts данных ви экземпляра в обновленных крючках и, как docs говорит: обновленный крючок вызывается после изменения данных вызывает виртуальный DOM быть повторно -обеспечен и исправлен. Итак, вы находитесь в бесконечном цикле: вы изменяете данные VUE, которые он обновляет DOM, и вызывают обновленный блок, который снова меняет данные.

Это также упоминание в docs:

вы можете выполнять DOM-зависимые операции в этом крючке. Однако в большинстве случаев вам следует избегать изменения состояния в этом hook, , потому что это может привести к бесконечному циклу обновления.

Вы можете увидеть этот круг в приведенной ниже схеме жизненного цикла экземпляра vue.