从vue组件向laravel刀片对象发出值

Question

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

但是，当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 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是PHP的扩展，在呈现给浏览器之前在服务器端进行处理。

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

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