vue.js - 当本地脚本表单中的字段为空时如何显示错误消息?
问题描述
当用户将电子邮件和密码字段留空时,我试图添加一条错误消息,但它不起作用,不确定问题出在哪里。我尝试在脚本文件中添加一些 if 语句,以便用户不能将该字段留空,但我无法显示错误消息。
<template>
<Page>
<ActionBar title="Register" />
<ScrollView>
<StackLayout id="register" class="registerform">
<Label text="Email:" class="Email" />
<TextField v-model="email" class="email"></TextField>
<Label text="Password:" class="Password" />
<TextField v-model="password" class="password"></TextField>
</TextField>
<Button text="Register" @tap="onRegisterTap" />
{{userM}}
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
name: "register",
data() {
return {
email: "",
password: "",
userM: ""
};
},
methods: {
onRegisterTap: function() {
this.userM = "";
if (!this.email) {
this.userM = "error: empty email";
return;
}
if (!this.password) {
this.userM = "error: empty password ";
return;
}
else {
this.userM = " error: username or password is incorrect.";
return;
}
};
</script>
解决方案
您需要添加userM
in data()
,否则 Vue 不知道它应该是响应式的。
而且您还需要一个标签来显示消息。在您的情况下
<Label :text="userM" class="UserM" />
应该可以工作。它根据您的代码工作:https ://play.nativescript.org/?template=play-vue&id=N7NbOk
推荐阅读
- java - 在哪里以及如何存储使用 Jar 执行的 python 脚本?
- c - 生产者/消费者:1 个生产者,多个消费者 - 1 个信号量,1 个互斥体,1 个条件变量
- .net - 使用 .net 服务器对 ubuntu16.04 有疑问
- javascript - 如何根据 mvc 5 中的静态下拉列表过滤数据库记录
- javascript - Crossfilter - 无法从其他组(不是从关联组)获取过滤记录
- angular6 - 如何使用角度 6 在单击按钮时增加文本框
- javascript - 在弹出项目上移动时自动滚动
- angular - 如何在 Angular 6 中使用 microsoft office-js 定义 Excel
- javascript - 关于事件循环代码片段的随机结果
- javascript - 如何关闭通过单击javascript中的图像打开的新标签?