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=".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>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/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 :)
Share Improve this question asked Sep 22, 2019 at 4:56 Houy NarunHouy Narun 1,7259 gold badges43 silver badges96 bronze badges 3-
you have a syntax error - there needs to be something after
v-on, for instancev-on:clickorv-on:inputwill trigger onClick and onInput respectively. Currently you're not binding v-on to any DOM event – Pei Qi Tea Commented Sep 22, 2019 at 5:02 -
@KyurikoTea, yeah it is, by
v-on:input="check"orv-on:keyup="check"it works but the input box is never empty. Thanks. :) – Houy Narun Commented Sep 22, 2019 at 5:14 -
I'm confused, pardon my poor English - did
v-on:input="check"orv-on:keyup="check"solve your problem? Because I binded with either of these two events and it worked for me. If you're trying to achieve something else, please do update your snippets. – Pei Qi Tea Commented Sep 22, 2019 at 5:59
2 Answers
Reset to default 1There are multiple ways to solve this issue like:
- Add conditional logic to your template:
<p>{{ message || 'Your default text here'}}</p>
- Use puted property
- Use filter
Test it Like this:
if (this.message === '' || this.message === null || this.message.value === 0){
this.message='Please enter text in text box below';
}