[英]Problems loading liquid in Javascript
我正在尝试加载 shopify 液体对象 {{product.price | json}} 到 JS 中,但它根据 FE 上的以下代码显示 NaN,关于如何将液体传递到 JS 的任何想法?
我有两个功能,但都不适用于 shopify 产品价格。 我使用了一个成功的静态数字,但需要价格像您期望的那样是动态的。
<div class="afterpay-section" id="afterpay" v-for="item in items" v-bind:class="{'afterpay-label': afterpayAlert}">
${ afterpayPayments }
</div>
<script>
const app = new Vue({
el: '#afterpay',
data: {
textColor: {
color: 'red',
},
textFont: {
'font-weight': 'bold',
},
afterpayMessage: 'Or 4 payments of',
withAfterpay: 'with AfterPay',
failedAlertOne: '',
failedAlertTwo: '',
items: [
{ price: {{ product.price | money_without_trailing_zeros | json }} },
],
},
delimiters: ['${', '}'],
computed: {
afterpayAlert: function() {
if (this.failedAlertOne) {
return this.failedAlertOne + ' ' + this.failedAlertTwo;
} else {
return this.afterpayMessage + ' ' + {{ product.price | money_without_trailing_zeros | json }} + ' ' + this.withAfterpay;
}
},
afterpayCal() {
let productPrice = '{{ product.price | money_without_trailing_zeros | json }}';
let afterpayDiscount = 4;
let totalPrice = productPrice / afterpayDiscount;
if(this.afterpayMessage) {
return this.afterpayMessage + ' ' + {{ product.price | money_without_trailing_zeros | json }} + ' ' + this.withAfterpay;
}
},
afterpayPayments () {
let productPrice = '{{ product.price | money_without_trailing_zeros | json }}';
return this.afterpayMessage + ' ' + ((productPrice / 4) / 100 ).toFixed(2) + ' ' + this.withAfterpay;
}
},
})
</script>
<style>
.afterpay-label {
background-color: transparent;
color: #000;
padding: 10px 0;
margin: 5px 0;
}
</style>
您正在使用money
过滤器,它很可能会给您一个类似“$50”之类的字符串。 然后你在你的计算中使用这个值, ((productPrice / 4) / 100 ).toFixed(2)
,这肯定会给你NaN
。
不要使用money
过滤器或不要忘记删除$
和任何其他表示您获得的价值的标志。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.