Display vue component in laravel blade template

Question

I am doing a simple calculation in app.js. It just multiplies the product price by quantity. I want to display the total value in laravel, so a user can preview their order.

app.js

const app = new Vue({
    el: '#item',
    data() {
        return {
            form: {
                price: 0,
                quantity: 0,
                total: 0
            }
        }
    },
    methods: {
        updatePrice(event) {
            this.form.price = event.target.value;
            this.form.total = this.form.price * this.form.quantity
        },
        updateQuantity(event) {
            this.form.quantity = event.target.value;
            this.form.total = this.form.price * this.form.quantity
        }
    }

This is fine. They calculate the form value in blade file. But how I can display the total?

I want to display the 'total' in blade file. How can I access that? When I use @{{ total }} I get this error:

app.js:36519 [Vue warn]: Property or method "total" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Answer 1

Typically you would use template interpolations for that.

Something like {{ form.total }}, which in a Blade template, to overcome the usage of {{, it would be:

<div id="item">
  <p>Total is: @{{ form.total }}</p>
</div>

Alternatively, you can change Vue's delimiters and workaround this issue. For example (delimiters: ['!{', '}!'],):

const app = new Vue({
    el: '#item',
    delimiters: ['!{', '}!'],
    data() {
        return {
            form: {
                price: 1,
                quantity: 1,
                total: 1
            }
        }
    },
    methods: {
        updatePrice(event) {
            this.form.price = event.target.value;
            this.form.total = this.form.price * this.form.quantity
        },
        updateQuantity(event) {
            this.form.quantity = event.target.value;
            this.form.total = this.form.price * this.form.quantity
        }
    }
});

<script src="https://unpkg.com/vue"></script>

<div id="item">
  <p>Total is: !{ form.total }!</p>
  price: <input @input="updatePrice"><br>
  quantity: <input @input="updateQuantity"><br>
</div>

Although that would work, in your case, instead of handling events directly, I suggest using v-model in price and quantity and creating total as a computed property. This would be an approach that better uses Vue's capabilities (and is less code, yay):

const app = new Vue({
    el: '#item',
    data() {
        return {
            form: {
                price: 1,
                quantity: 1,
                total: 1
            }
        }
    },
    computed: {
        total() {
            return this.form.price * this.form.quantity
        }
    }
});

<script src="https://unpkg.com/vue"></script>

<div id="item">
  <p>Total is: {{ total }}</p>
  price: <input v-model="form.price"><br>
  quantity: <input v-model="form.quantity"><br>
</div>