vue.js - 当本地脚本表单中的字段为空时如何显示错误消息？

Question

当用户将电子邮件和密码字段留空时，我试图添加一条错误消息，但它不起作用，不确定问题出在哪里。我尝试在脚本文件中添加一些 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>

Answer 1

您需要添加userMin data()，否则 Vue 不知道它应该是响应式的。

而且您还需要一个标签来显示消息。在您的情况下 <Label :text="userM" class="UserM" />应该可以工作。它根据您的代码工作：https ://play.nativescript.org/?template=play-vue&id=N7NbOk

Answer 2

您可以使用 alert 来查看您给用户的错误信息：

onRegisterTap: function() {

            if (!this.email) {
                alert("error: empty email")
                return
            }
            if (!this.password) {
                alert("error: empty password ")
                return
            }
}