Как отобразить сообщение об ошибке, когда поле не заполнено в форме собственного скрипта?

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

Вам нужно добавить userM в data(), так как в противном случае Vue не знает, что это должно быть реактивным.

И вам также нужна метка для отображения сообщения. В вашем чехол <Label :text="userM" class="UserM" /> должен работать. Здесь он работает на основе вашего кода: https://play.nativescript.org/?template=play-vue&id=N7NbOk

Answer 2

Вы можете использовать оповещение для просмотра вашего сообщения об ошибке пользователю:

onRegisterTap: function() {

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