Vue 2 Mixin doesn't work properly in v-for "[Vue warn]: Error in render: "TypeError: Cannot read property 'discountCalc' of undefined""

Question

#laravel-8 + vue 2

我做了这样的混合：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";

到现在还好

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

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

但是当我像这样在 v-for 中使用它时，问题就出现了：

<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'”

Answer 1

您应该从模板中删除 this :

<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 doesn't work properly in v-for "[Vue warn]: Error in render: "TypeError: Cannot read property 'discountCalc' of undefined""

Vue 2 Mixin doesn't work properly in v-for "[Vue warn]: Error in render: "TypeError: Cannot read property 'discountCalc' of undefined""

javascript

vue.js

vue-component

vuejs2

laravel-8