Showing a Vue component within a Laravel Blade template

Question

Showing a Vue component within a Laravel Blade template

Currently, I am performing a basic calculation within app.js by multiplying the product price with the quantity. My goal is to showcase the total value in Laravel for users to 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
        }
    }

The process of calculating the form value in the blade file is working well. However, I am facing an issue when trying to display the total amount.

https://i.stack.imgur.com/guAIU.png

I intend to exhibit the 'total' in the blade file. How can I achieve this? Using @{{ total }} results in the following 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.

php laravel vue.js laravel-blade

Answer 1

Answer №1

Normally, the ideal method for this would be using template interpolations.

For instance, something like {{ form.total }}, which in a Blade template would require changing {{ to:

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

Alternatively, you have the option to adjust Vue's delimiters to tackle this issue. 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>

While that solution is effective, I recommend utilizing v-model on price and quantity with total as a computed property. This approach fully utilizes Vue's capacities (and saves some lines of code):

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>

Answer 2

Normally, the ideal method for this would be using template interpolations.

For instance, something like {{ form.total }}, which in a Blade template would require changing {{ to:

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

Alternatively, you have the option to adjust Vue's delimiters to tackle this issue. 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>

While that solution is effective, I recommend utilizing v-model on price and quantity with total as a computed property. This approach fully utilizes Vue's capacities (and saves some lines of code):

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>

Showing a Vue component within a Laravel Blade template

Answer №1

Similar questions

Incorporating fontawesome icons ABOVE custom menu items in WordPress

What are the most effective strategies for efficiently handling enormous json files?

Form containing unchecked checkbox

How can I modify the Layout of my Quasar App to move the left Drawer to the right side?

Struggling to access specific data within a JSON object? Wondering how to extract and display data from a JSON object in VUE?

Skipping validation while navigating back on SmartWizardIf you need to bypass validation during backward

Loading of local resources is restricted in the Apache web server

What is the best way to send variables from JavaScript to PHP while utilizing Ajax technology?

How do I enable automatic playback for a vimeo video using the embed tag?

Using the Mousetrap binding on a nuxt.js page may not be effective

Using PHP to decode a JSON array (Troubleshooting issues with Ajax JSON POST to PHP)

Exploring the Possibilities of Wordpress Search with Multiple Dropdown Options

Validation of default values in contact forms

Deciphering the elements in the periodic table using PHP and HTML

Exploring the process of sending a post data array from Angular to retrieve data on a Laravel API platform

Replacing a variable in LessPHP with PHP

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

Dealing with shared content in your Capacitor Android application may require some specific steps

What are the reasons for being unable to access the HTML canvas in Vue?

verify access with mysql database