Question

我已经能够将数据从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剑

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

将值从Vue组件发送到laravel刀片对象

2 个答案: