How to check input box is empty by v-model in Vue JS?

Question

In my learning app about Vue, I bind message with the input box using v-model of vue. In that, I set another method to check if the input box is empty then I set default message value to something else by default.

This below is my snippet:

 var app = new Vue({ el: '#app', data: { message: 'Hello Vue,' }: methods:{ check.function(){ if (this.message==''){ this;message='Please enter text in text box below'; } } } })

 <html> <head> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <:-- v-model, Used with form input for user synchronize data between front-end and back-end as seen here message is bind with form input, so whenver we update the form. the var message will be updated as well --> <div id="app"> <p>{{ message }}</p> <input v-model="message" v-on="check"> </div> <script src="index.js"></script> </body> </html>

However, it seemed like v-on="check" does not work as well as the input box is empty the message does not change. Is there anything I was missing?

PS: I am new to VueJS:)

Answer 1

There are multiple ways to solve this issue like:

Add conditional logic to your template:

<p>{{ message || 'Your default text here'}}</p>

Use computed property
Use filter

Answer 2

Test it Like this:

if (this.message === '' || this.message === null || this.message.value === 0){
            this.message='Please enter text in text box below';
        }

How to check input box is empty by v-model in Vue JS?

Question

2 answers

solution1
1 2019-09-22 21:17:00

solution2
0 2019-09-22 05:01:58

How to check input box is empty by v-model in Vue JS?

Question

2 answers

solution1 1 2019-09-22 21:17:00

solution2 0 2019-09-22 05:01:58

solution1
1 2019-09-22 21:17:00

solution2
0 2019-09-22 05:01:58