Использование VUE. js для загрузки контента

Question

Я пытаюсь обработать 2 сообщения, используя vue. js, но, похоже, он не загружается в FE?

<template v-for="item in items">
    <span>{{ afterpayMessage }}: {{ item.price }} with AfterPay</span>
</template>

<script>
  var afterpay = new Vue({
  el: '#afterpay',
  data: {
    afterpayMessage: 'Or 4 payments of',
    items: [
      { price: {{ product.price | money_with_currency | json }} },
    ]
  }
})
</script>

Я не пытался использовать следующий код, который был любезно предложен включает функцию возврата, но все, что отрисовывается, это текст «с дополнительной оплатой», а не шаблоны.

<div id="afterpay" v-for="item in items">
    {{ afterpayMessage }}: {{ item.price }} with AfterPay
</div>

<script>
  var afterpay = new Vue({
  el: '#afterpay',
    data: function () {
      return {
        afterpayMessage: 'Or 4 payments of',
        items: [
          { price: {{ product.price | money_with_currency | json }} },
         ]
      }
    }
});
</script>

Answer 1

вы можете использовать этот формат данных

data: function () {return {afterpayMessage: 'Или 4 платежа', элементы: [{price: {{product.price | money_with_currency | json}}},]}}