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>

然后bladeField将绑定到field中的ExampleComponent

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

1 个答案: