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

Question

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

任何帮助，将不胜感激。

Answer 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将绑定到ExampleComponent field