如何将数据从 Vue.js 传递到 Blade 视图？答案

【问题标题】：How to pass data from Vue.js to Blade view?如何将数据从 Vue.js 传递到 Blade 视图？
【发布时间】：2020-01-02 23:30:33
【问题描述】：

我只是找不到将数据从 vue.js 组件传递到 Laravel 项目中的刀片视图的方法。我尝试使用隐藏的输入字段，但数据绑定返回 [object Object]。

任何帮助将不胜感激。

【问题讨论】：

欢迎来到 Stack Overflow。请添加一些代码来帮助解释您遇到的问题。

标签： javascript laravel vue.js laravel-blade

【解决方案1】：

在根组件数据对象中创建一个变量并从子组件中更改它，因此假设resources/js/components/ExampleComponent.vue 像这样

<template>
    <div class="container">
        <input v-model="field" type="text">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                field: ''
            }
        },
        watch: {
            field: function (val) {
                this.$root.bladeValue = val;
            }
        }
    }
</script>

还有一个resources/js/app.js，就像这样

window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
    el: '#app',
    data() {
        return {
            bladeValue: ''
        }
    }
});

和像这样的刀片视图resources/views/welcome.blade.php

<div id="app">
    <example-component></example-component>
    <h1>@{{ bladeValue }}</h1>
</div>
<script src="/js/app.js"></script>

然后bladeValue 将绑定到field 中的ExampleComponent

【讨论】：