Vue 2 Laravel 5.3 无限更新循环

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

您正在更新挂钩中更新 vue 实例数据变量 carts，正如 docs 所说：更新挂钩 在数据更改导致虚拟 DOM 待 re-rendered 并修补。 所以你处于无限循环中：你更改 vue 数据它更新 DOM 并调用更新块再次更改数据。

这在docs中也有提到：

you can perform DOM-dependent operations in this hook. However, in most cases you should avoid changing state in this hook, because it may lead to an infinite update loop.

你可以在下面的vue实例生命周期图中看到这个圈子。

Vue 2 Laravel 5.3 无限更新循环

Vue 2 Laravel 5.3 Infinte Update Loop

vue.js

laravel-5.3

vuejs2