我是Laravel和VueJS的新手，所以提前对混乱的代码感到抱歉。
我一直在尝试制作一个注册表单，将 VueJS 集成到 laravel 中以使其更具动态性。 现在我一直在尝试使用{{ }}前面的@来显示 laravel，我正在尝试集成 VueJS，但不是 VueJS 对此做出回应，它只是简单地打印：{{ error }}或{{ checked ? "yes" : "no" }}。
叶片
@extends('layout.layout')
@section('content')
<section class="page-content">
<div class="container">
<article class="fillout-form">
<form action="{{ route('account.register.new') }}" method="post" id="registerForm">
{{ csrf_field() }}
@{{ error }}
<section v-if="step === 1">
<h1>Step One</h1>
<p>
<legend for="name">Your Name:</legend>
<input id="name" name="name" v-model="registration.name">
</p>
<p>
<legend for="surname">Your Lastname:</legend>
<input id="surname" name="surname" v-model="registration.surname">
</p>
<p>
<legend for="email">Your Email:</legend>
<input id="email" name="email" type="email" v-model="registration.email">
</p>
<p>
<legend for="number">Your Phone number:</legend>
<input id="number" name="number" type="number" v-model="registration.number">
</p>
<button @click.prevent="next()">Next</button>
</section>
<section v-if="step === 2">
<h2>Step Two</h2>
<p>
<legend for="account">Account Holder:</legend>
<input id="account" name="account" v-model="registration.account">
</p>
<p>
<legend for="iban">Your IBAN:</legend>
<input id="iban" name="iban" v-model="registration.iban">
</p>
<button @click.prevent="prev()">Previous</button>
<button @click.prevent="next()">Next</button>
</section>
<section v-if="step === 3">
<h3>Step Three</h3>
<p>
<input type="checkbox" v-model="checked">
@{{ checked ? "yes" : "no" }}
</p>
<button @click.prevent="prev()">Previous</button>
<button @click.prevent="submit()">Save</button>
</section>
</form>
</article>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="{{asset ('js/registerFlow.js')}}"></script>
@endsection
VueJS
const errors = {
empty: 'Please fill in all fields',
invalidmail: 'Your email is invalid',
};
const app = new Vue({
el:'#app',
mounted() {
window.addEventListener("keypress", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
this.next();
}
})
},
data() {
return {
error: null,
step:1,
checked: false,
registration:{
name:null,
surname:null,
email:null,
number:null,
account:null,
iban:null,
},
}
},
methods: {
prev() {
this.step--;
},
next() {
this.error = "";
if(this.step === 1)
{
if(!this.registration.name || !this.registration.surname || !this.registration.email || !this.registration.number)
{
this.error = errors.empty;
return false;
}
}
if(this.step === 2)
{
if(!this.registration.account || !this.registration.iban)
{
this.error = errors.empty;
return false;
}
}
this.step++;
},
submit() {
alert('Submit to blah and show blah and etc.');
},
}
});
这不是使用 Vue.js 和 Laravel 的正确方法。通常，无需在刀片中编写所有内容，只需在.blade文件中创建一个组件，然后移动.vue文件中的所有逻辑即可。我建议您阅读本文以了解如何在 Laravel/Vue 中设置一个简单的表单
问题是，你混合了两个模板引擎。你可以创建一个 Vue 组件，它不会被刀片触及，并提交要渲染的错误数据。