如何从 Vue 组件向 Laravel Blade 对象发出值？答案

【问题标题】：How to emit a value from Vue component to a Laravel Blade object?如何从 Vue 组件向 Laravel Blade 对象发出值？
【发布时间】：2020-07-09 17:39:19
【问题描述】：

我已经能够将数据从blade 传递到vue component。

但是，当vue 上的值发生更改时，我想将vue component 中的值发送到刀片对象。

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

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

是否可以在 vue component 中更改 jobId 以将值绑定到刀片中的 $employee->job_id 时发出？

另外，blade 和 vue 组件之间是否可以进行双向绑定？

【问题讨论】：

标签： vue.js vuejs2 laravel-5.7

【解决方案1】：

简而言之，不。

Blade 是 PHP 的扩展，在呈现给浏览器之前在服务器端进行处理。

为了实现这一点，您需要使用客户端脚本来管理 job_id 的呈现。

【讨论】：

【解决方案2】：

客户端和服务器端代码之间有一个主要区别。

Blade，一个来自 Laravel 框架的模板引擎，是一个语法糖，最终提供一个由您的网络服务器执行的 .php 文件。

Vue 是一个在浏览器端执行的 javascript 框架。无论 Vue 有什么数据，总是来自你的服务器端环境（或者它已经存在于你的 javascript 代码中）。

要将数据从服务器传递到 Vue 环境，可以这样做：

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

这会将编码后的$person 属性JSON 传递给视图。这会产生一个通过:person 传递给您的Vue 组件的字符串。
你当然可以像这样传递任何对象。对于简单的值（字符串/数字），您可以使用 :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>

【讨论】：