在 Javascript 中加载液体的问题答案

【问题标题】：Problems loading liquid in Javascript在 Javascript 中加载液体的问题
【发布时间】：2020-03-06 02:41:02
【问题描述】：

我正在尝试加载 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>

【问题讨论】：

标签： javascript vue.js liquid

【解决方案1】：

您正在使用money 过滤器，它很可能会给您一个类似“$50”或类似的字符串。然后你在计算中使用这个值，((productPrice / 4) / 100 ).toFixed(2)，它肯定会给你NaN。

不要使用money 过滤器或不要忘记删除$ 和任何其他您获得的价值的标志。

【讨论】：