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

Question

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

任何帮助将不胜感激。

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将被绑定到fieldExampleComponent