Как передать значение из компонента Vue объекту Laravel Blade?

Мне удалось передать данные из blade в vue component.

Но я хотел передать значение из vue component в объект лезвия, когда значение изменяется на vue.

Компонент Vue

<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>

Скрипт в компоненте Vue

<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>

Возможно ли излучение при изменении jobId в vue component для привязки значения к $employee->job_id в лезвии?

В качестве альтернативы, возможно ли двустороннее связывание между blade и компонентом vue?


vue.js vuejs2 laravel-5.7
person AkshayKriti    schedule 01.03.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Короче нет.

Blade - это расширение PHP, которое обрабатывается на стороне сервера перед тем, как будет представлено браузеру.

Для этого вам нужно будет использовать клиентский скрипт для управления рендерингом job_id.

person oldmansimons    schedule 01.03.2019

arrow_upward
0
arrow_downward

Существует большая разница между кодом на стороне клиента и на стороне сервера.

Blade, шаблонизатор из фреймворка Laravel, представляет собой синтаксический сахар, который в конечном итоге обслуживает .php файл, который выполняется вашим веб-сервером.

Vue - это фреймворк javascript, который выполняется на стороне браузера. Какие бы данные у Vue ни были, они всегда поступают из вашей серверной среды (или они уже существуют в вашем коде javascript).

Чтобы передать данные с вашего сервера в среду Vue, можно сделать следующее:

// File my_blade_view.blade.php
<my-vue-component :person="{{ json_encode($person) }}"></my-vue-component>
  • Это передает JSON-свойство $person в представление. В результате получается строка, которая передается вашему компоненту Vue через :person.
  • Конечно, вы можете передать любой такой объект. Для простых значений (строки / числа) вы можете просто сделать :person="{{ $myVal }}".

Если вы хотите передать данные обратно в серверную среду, вам нужно будет специально сделать HTTP-запрос. Это означает, что вы должны отправить свой собственный запрос GET / POST / PUT / DELETE с данными, которые были обновлены.

Невозможно напрямую привязать объект php к объекту javascript.

Урезанный пример Vue для отправки данных на ваш сервер может выглядеть так:

// 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>
person Flame    schedule 02.03.2019