Проблемы с загрузкой жидкости в Javascript

Question

Я пытаюсь загрузить жидкий объект shopify {{product.price | json}} в JS, но он показывает NaN на основе следующего кода на FE, любые идеи о том, как передать жидкость в JS?

У меня есть две функции, но ни одна не работает с Shopify цена продукта. Я использовал номер stati c с успехом, но мне нужно, чтобы цена была динамичной c, как и следовало ожидать.

<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 или не забудьте удалить $ и любые другие знаки для значения, которое вы получаете.