如何將數據從 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