передать значение из Vue Component в объект лезвия Laravel

Question

Я смог передать данные от blade до vue component.

Но я хотел передать значение из vue component в блейд-объект при изменении значения на 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 InVue 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>

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

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

Answer 1

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

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>

Answer 2

Короче, нет.

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

Чтобы достичь этого, вам потребуется использовать сценарий на стороне клиента для управлениярендеринг job_id.