Is there an issue rendering 2 messages in vue.js on the front end?
<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>
<p>I have attempted to use this code, suggested to include a return function, but only the 'with afterpay' text is rendering and not the templates.</p>
<pre><code><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 }} },
]
}
}
});