[Vuejs]-How to emit a value from Vue component to a Laravel Blade object?

In short, no.

Blade is an extension of PHP and is processed on the server side before being presented to the browser.

In order to achieve this, you would need to use a client-side script to manage the rendering of the job_id.

There is a major difference between client side and server side code.

Blade, a template engine from the Laravel framework, is syntactic sugar that eventually serves a .php file that is executed by your webserver.

Vue is a javascript framework that executes on the browser side. Whichever data Vue has, always comes from your serverside environment (or it already exists in your javascript code).

To pass data from your server to your Vue environment, one could do this:

// File my_blade_view.blade.php
<my-vue-component :person="{{ json_encode($person) }}"></my-vue-component>

• This passes the $person property JSON encoded to the view. This results in a string that is passed to your Vue component through :person.
• You can ofcourse pass any object like this. For simple values (strings/numbers) you could just do :person="{{ $myVal }}".

If you want to pass data back to your serverside environment, you will have to specifically make a HTTP request. That means you should send your own GET/POST/PUT/DELETE request with the data that has updated.

There is no way to directly bind a php object to a javascript object.

A stripped down Vue example to send data to your server might look like this:

// MyVueComponent.vue
<template>
    <div>Template stuff</div>
</template>
<script>
    export default {
        methods: {
            // Call this function for instance on `@input` triggers etc.
            savePerson() {
                // `this.$http` is a global variable that you should set on the Vue instance.
                // A good library would be Axios (https://www.npmjs.com/package/axios)
                this.$http.post('save-person', {
                    name: 'John'
                });
            }
        }
    }
</script>