- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 Laravel 和 VueJS 的新手,对于困惑的代码提前深表歉意。
我一直在尝试制作一个注册表单,并将 VueJS 集成到 laravel 中以使其更具动态性。现在我一直在尝试使用 {{ }}
前面的 @
来显示 laravel 我正在尝试集成 VueJS 但不是 VueJS 响应它只是清楚地打印:{{ error }}
或 {{ checked ? "is":“否”}}
。
Blade
@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 中编写所有内容,你只需在你的 .blade
文件中创建一个组件并将所有逻辑移动到你的 .vue
文件中。我建议你阅读 this了解如何在 Laravel/Vue 中设置一个简单的表单
关于Laravel 和 VueJS : Calling a VueJS Method Inside Blade,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60170910/
这段代码无法编译: for(vector::iterator it = shapes.end(); it >= shapes.begin(); --it){ *it.update(1,1);
我一直在研究 Common Lisp 对象协议(protocol) (CLOS),我遇到了一个疑问。 有人知道 CLOS 中的“标准方法组合”和“简单方法组合”是什么意思吗? 在“简单方法组合”中,“
在Rust上对值调用方法之间是否有任何区别,如下所示: struct A { e: u32 } impl A { fn show(&self) { println!("{}",
我在一些 StackOverflow 答案中看到了术语抽象方法、具体方法和默认方法的“不同”定义。 Java 语言规范给出的真正定义是什么?请在您的答案中包含相关的支持 JLS 引用资料。 最佳答案
如果method = "post",如何使rest[method]扩展为rest.post(uri, body).then(. .? function proxyUrl() { return
这个问题在这里已经有了答案: Method cannot be translated into a store expression (1 个回答) 关闭 9 年前。 我有一个问题。我在 Visua
它们各自的优缺点是什么? 接口(interface)方法 虚方法 抽象方法 什么时候应该选择什么?做出这一决定时应牢记哪些要点? 最佳答案 虚拟和抽象几乎是一样的。虚方法在基类中有一个可以选择被覆盖的
我在 Meteor.js 上的那段代码出错: 客户端 : Meteor.call("logUser", function(myvar){ console.log("le c
运行代码时出现以下错误 Line: 18 illegal start of expression Line: 18 ';' expected 这意味着第 18 行中有代码写得不正确(public bo
如果可能的话,如何从另一个方法的返回中调用一个方法? 例如…… class Example { public static void main(String[] args) {
当遍历指针的 vector (或其他容器)时,使用以下优势和/或优势之间是否有任何区别: for (it = v.begin(); it != v.end(); ++it) { (*it)->
在从带有参数的 void 方法打印值或将值返回给方法调用者并在方法调用者中打印它之间,哪个被认为是更好的做法(如果有的话)?比如第一个代码摘录是前者,第二个代码摘录是后者: public static
考虑这个例子https://codesandbox.io/s/1yvp4zz5x7?module=%2Fsrc%2FApp.vue Greet1 Greet2
晚上好, 我刚开始使用 Microsoft.Contracts(最新版本)并将其插入示例界面之上,现在它看起来像这样: namespace iRMA2.Core.Interfaces { us
我是 Laravel 4 的新手,并试图弄清楚为什么我收到一个错误,说 Method [show] 不存在。 我没有名为“show”的方法,只能想象这是一个内部的 Laravel 方法,但我不知道如何
有人可以向我解释一下当我们进行下一次返回时“或”(||) 是什么意思吗? 我的意思是这行: 返回封面(值,金额 - 值 [索引],索引 + 1)||覆盖(值、金额、索引 + 1); public st
这个问题已经有答案了: Why doesn't the post increment operator work on a method that returns an int? (11 个回答) 已
我很难理解 jQuery 的 $.method() 和 $(selector).method 之间的区别。 $.method() 实际适用于 DOM 中的哪些元素?如果有人能帮助解释这两种说法之间的区
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 5 年前。 Improve t
////////////////////////////////////////////////////////////////////////////// // 3 construct
我是一名优秀的程序员,十分优秀!