مهدی سمیعیان
4 سال پیش توسط مهدی سمیعیان مطرح شد
2 پاسخ

ارور infinite update loop هنگام استفاده از axios در کامپوننت

هنگام استفاده از axios در کامپوننت در کنسول مرورگر ارور زیر رو مشاهده می کنم. مشکل چیه؟
[Vue warn]: You may have an infinite update loop in a component render function.


ثبت پرسش جدید
miladk313
تخصص : برنامه نویس لاراول
@miladk313 4 سال پیش مطرح شد
0

سلام باید کدهاتو بزاری چون این ارور میتونه دلیل های مختلفی داشته باشه.


مهدی سمیعیان
تخصص : برنامه نویس وب/اندروید
@mahdidev 4 سال پیش مطرح شد
0

@miladk313

<script>
window.Event = new Vue();

var cart = {
    props: ['pr'],

    data: function() {
        return {
            email: 'info@mycompany.com',
            removeUrl: '/mybasket/remove/',
            ProductUrl: '/product/',
            info : [],
            numbers : 0,
            price: 0,
            totalPrice: 0,
            paymentPrice: 0,
            bill : [],
            test : 2,
            min : 1,
            stock : 100,
            major: 0,
            majorPrice: 0,
            majarStock: 0,
            currentPrice:0,
            checked : false,
            firstRun : true,
            dataLenght: 0,

        };
    },created() {
        this.connectign();
        this.getFirstSum();

    }
    ,mounted() {
        // this.getSum();

    },beforeUpdate() {

    },
    updated() {
        // this.getSum();
        this.ConvertNumberToPersion();

    },

    methods: {

        connectign(){  
      axios
      .get('/mycart')
      .then(response => this.info = response.data)
      .catch(error => console.log(error));

        },

        getSum(num){ 
            this.paymentPrice = 0;
            var inputs = $(".tprice");
            for(var i = 0; i < inputs.length; i++){
                this.paymentPrice += parseInt($(inputs[i]).val()); 
            }
        },checkMinMax: function (event){
            // if(this.numbers > this.stock){
            event.preventDefault();
            // }

        }
        ,
        getFirstSum(){
            this.paymentPrice = {{$sum}};

        },inputStyle(){
            $("input[type='number']").inputSpinner();
        }
        ,setNum(number){
            this.numbers = number;

        } ,
        setFirstPrice(num){
            this.currentPrice = parseInt(num);
        },
        changeMajor(price,majorPrice){
            if(this.checked == false){
                this.currentPrice = majorPrice;
                this.checked = true;
                console.log(majorPrice+'if')
                this.$set('2222');
            }else{
                this.currentPrice = price;
                this.checked = false;
                console.log(price+'else')
            }
        }
        ,
        ConvertNumberToPersion(){
            let persian = { 0: '۰', 1: '۱', 2: '۲', 3: '۳', 4: '۴', 5: '۵', 6: '۶', 7: '۷', 8: '۸', 9: '۹' };
        function traverse(el) {

            if (el.nodeType == 3) {
                var list = el.data.match(/[0-9]/g);
                if (list != null && list.length != 0) {
                    for (var i = 0; i < list.length; i++)
                        el.data = el.data.replace(list[i], persian[list[i]]);
                }
            }
            for (var i = 0; i < el.childNodes.length; i++) {
                traverse(el.childNodes[i]);
            }
        }
        traverse(document.body);
        }

    },
    template: `
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h1 class="cart-heading">پیش فاکتور</h1>
                <form action="/shipping" method="post" >
                    {{ csrf_field() }}
                    <div class="table-content table-responsive">
                        <table>
                            <thead>
                            <tr>
                                <th>حذف</th>
                                <th>تصویر</th>
                                <th>عنوان</th>
                                <th>قیمت</th>
                                <th>عمده فروشی</th>
                                <th>تعداد</th>
                                <th>جمع</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr v-for="(pr, index) in info" v-bind:key="pr.id" >
                                <td class="product-remove"><a :href="removeUrl+pr.id"><i class="pe-7s-close"></i></a></td>
                                <td class="product-thumbnail">

                                    <a :href="ProductUrl+pr.price.product.slug"><img :src="pr.price.product.images['images']['100']" alt="#"></a>

                                </td>
                                <td class="product-name"><a :href="ProductUrl+pr.price.product.slug" v-text="pr.price.product.title+ ' (' + pr.price.color.title +' '+ pr.price.size.title + ')'">title </a></td>
                                <td class="product-price-cart">

                                    <input   v-model.number="min=pr.price.minimum" type="hidden" autocomplete="off">
                                    <input   v-model.number="stock=pr.price.stock" type="hidden" autocomplete="off">
                                    <input   v-model.number="major=pr.price.major" type="hidden" autocomplete="off">
                                    <input   v-model.number="majarStock=pr.price.major_stock" type="hidden" autocomplete="off">
                                    <input   v-model.number="price = pr.price.price" type="hidden" autocomplete="off">
                                    <input   v-model.number="majorPrice = pr.price.discount" type="hidden" autocomplete="off">

                                    <span class="amount" v-text="currentPrice = price" ></span>
                                    </td>
                                    <td class="product-name">
                                        <input v-if="majarStock == 0" type="checkbox" id="checkbox" disabled  title="فقط تک فروشی " >
                                        <input v-else type="checkbox" id="checkbox" disabled checked title=" فقط عمده فروشی" >

                                        </td>
                                <td class="product-quantity">

                                    <input :name="'id'+index"  :value="pr.id" type="hidden" autocomplete="off">

                                    <input :name="'number'+index" @change="getSum(numbers)"  @keypress="checkMinMax($event)" :min="min" :max="stock" :step="min"  v-model.number="numbers = pr.number" type="number" autocomplete="off">

                                </td>

                                <td class="product-subtotal" v-text="totalPrice = numbers * price" >

                                    </td>
                                    <input class="tprice"  v-model.number="totalPrice" type="hidden" autocomplete="off">
                                    <input name="lenght"  v-model.number="dataLenght = info.length" type="hidden" autocomplete="off">

                            </tr>

                            </tbody>
                        </table>
                    </div>

                    <div class="row">
                        <div class="col-md-5 ml-auto">
                            <div class="cart-page-total">
                                 <h2> صورتحساب</h2>
                                <ul>
                                    {{--<li>بدون تخفیف<span>100.00</span></li>--}}
                                    <li>جمع کل  <span v-text="paymentPrice">

                                        </span></li>
                                </ul>
                                 <button type="submit">مرحله بعد</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
    `
};

var vm = new Vue({
   el: '#app',
   components:{
       'myCart': cart
   },
   data() {

       return {
           gh: 22,
           info: null,
       }

   },created() {

    //    this.getData();

   }, methods: {

       getData () {
        axios
      .get('/mycart')
      .then(response => (this.info = response.data))
      .catch(error => console.log(error))    ;
       },

   }
});

</script>

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام