Vue 2 Mixin 在 v-for 中无法正常工作“[Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性“discountCalc""“ [英] Vue 2 Mixin doesn't work properly in v-for "[Vue warn]: Error in render: "TypeError: Cannot read property 'discountCalc' of undefined""

问题描述

#laravel-8 + vue 2

#laravel-8 + vue 2

我做了一个这样的 mixin:mixins/globalMixin.js :

I made a mixin like this : mixins/globalMixin.js :

import Vue from "vue";
Vue.mixin({
    methods: {
        price(item, pricePeriod) {
            return pricePeriod == "monthly"
                ? ((pricePeriod = "monthly"),
                  this.financial(this.priceRates(item["price_m"])))
                : ((pricePeriod = "yearly"),
                  this.financial(this.priceRates(item["price_y"] / 12)));
        },
        priceRates(price, localCurrency) {
            return localCurrency == "EUR"
                ? price / 10.5
                : localCurrency == "USD"
                ? price / 8.9
                : price;
        },
        discountCalc(price, itemCoupon, pricePeriod) {
            return itemCoupon && pricePeriod == "yearly"
                ? this.financial(price - (price * itemCoupon.percentage) / 100)
                : this.financial(price);
        },
        financial(x) {
            return Number.parseFloat(x).toFixed(2);
        }
    }
});

然后我在 app.js 中导入它导入./mixins/globalMixin.js";

Then i imported it in app.js import "./mixins/globalMixin.js";

到现在都还好

当在这样的 vue 模板中使用它时，它可以正常工作

When use it in vue template like this it wokrs properly

<b>{{
    this.discountCalc(
        this.price(item, pricing.period),
        item.coupon,
        localCurrency.name
    )
}} </b>

但是当我像这样在 v-for 中使用它时会出现问题:

But the issue comes up when i use it in v-for like this :

<ul class="list-unstyled mb-3 position-relative">
<li
    v-for="(subItem, index) in JSON.parse(
        item.info
    )"
    :key="index"
>
{{
    this.discountCalc(
        this.price(item, pricing.period),
        item.coupon,
        localCurrency.name
    )
}} 
</li>
</ul>

控制台错误:[Vue 警告]:渲染错误:TypeError:无法读取未定义的属性 'discountCalc'"

the console error : [Vue warn]: Error in render: "TypeError: Cannot read property 'discountCalc' of undefined"

推荐答案

你应该从模板中删除 this :

You should remove this from the template :

<ul class="list-unstyled mb-3 position-relative">
            <li v-for="(subItem, index) in JSON.parse(item.info)" :key="index">
              {{
               discountCalc(
                  price(item, pricing.period),
                  item.coupon,
                  localCurrency.name
                )
              }}
            </li>
          </ul>

这篇关于Vue 2 Mixin 在 v-for 中无法正常工作“[Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性“discountCalc""“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！