vue.js - 如何从 Vue 组件向 Laravel Blade 对象发出值？

问题描述

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

但是，我想vue component在值更改时从 to Blade 对象发出值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 刀片

<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.jsvuejs2laravel-5.7

解决方案

客户端和服务器端代码之间存在重大差异。

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

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

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

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

这会将$personJSON 编码的属性传递给视图。这会产生一个字符串，该字符串通过: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>

vue.js - 如何从 Vue 组件向 Laravel Blade 对象发出值？

问题描述

解决方案

推荐阅读