How to emit a value from Vue component to a Laravel Blade object?

Question

I have been able to pass the data from blade to vue component.

But, i wanted to emit the value from the vue component to blade object when value is changed on vue.

Vue Component

<template>
  <div>
    <b-form-select v-model="jobId" :options="employees" class="form-control mb-3">
      <!-- This slot appears above the options from 'options' prop -->
      <template slot="first">
        <option :value="null" disabled>Job Type</option>
      </template>
    </b-form-select>

    <template v-if="jobId==1">
      <b-button>Assign Course</b-button>
      <b-table :items="items" class="mt-3" outlined>
        <div slot="table-busy" class="text-center text-danger my-2">
          <strong>Loading...</strong>
        </div>
      </b-table>
    </template>
  </div>
</template>

Script In Vue Component

<script>
export default {
  props: {
    job_id: {
      type: String
    },
    employee: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      jobId: this.job_id,
      employees: JSON.parse(this.employee),
      isBusy: false,
      items: [
        { first_name: "Dickerson", last_name: "MacDonald", age: 40 },
        { first_name: "Larsen", last_name: "Shaw", age: 21 },
        { first_name: "Geneva", last_name: "Wilson", age: 89 },
        { first_name: "Jami", last_name: "Carney", age: 38 }
      ]
    };
  },
  computed: {},
  mounted() {
    console.log("Component mounted.");
  },
  method: {
    toggleBusy() {
      this.isBusy = !this.isBusy;
    },
    addNewContact() {}
  }
};
</script>

Laravel Blade

<div class="box box-success">
    <div class="box-header with-border">
             <h3 class="box-title">Employee Type</h3>
    </div>
    <div class="box-body">

           {{$employee->job_id}}
        <div id="app">
            //Vue Component
            <course job_id="{{$employee->job_id}}" employee="{{$jobs}}"></course>
        </div>
    
    </div>
    <!-- /.box-body -->
</div>

Is it possible to emit when jobId is changed in vue component to bind the value to $employee->job_id in blade?

Alternatively, is it possible for two way binding between blade and vue component?

Answer 1

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.

Answer 2

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>