问题描述
限时送ChatGPT账号..#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屋!
更多推荐
[db:关键词]
发布评论