在 Javascript 中加載液體的問題

Question

我正在嘗試加載 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>

Answer 1

您正在使用money過濾器，它很可能會給您一個類似“$50”之類的字符串。 然后你在你的計算中使用這個值， ((productPrice / 4) / 100 ).toFixed(2) ，這肯定會給你NaN 。

不要使用money過濾器或不要忘記刪除$和任何其他表示您獲得的價值的標志。