Clash Royale CLAN TAG#URR8PPP

How to hide error message in vue js after validation is true?

Actually my problem I am checking when a particular value is valid through v-on:input. If, the value is invalid I get the response as "invalid data" and i display the same. But, when the value becomes valid, the "invalid data" is not hiding. How to I able to do so.

My code is

methods:
checkLimit: function ()
var vm = this;
data = ;
if (this.no != '') data['no'] = this.no;
$.ajax(
url: "doc/checkNumber",
method: "POST",
data: data,
dataType: "JSON",
success: function (e)
if (e.status == true)

else
console.log(e.msg);
vm.error = e.msg;


,
);
,



So if status is false, I am showing as <input type="text" class="form-control" v-model="orno" required="" v-on:input="checkLimit" maxlength="3"><p>error</p>. But when Status is true the error message is still present. How can I update based on the change?

<input type="text" class="form-control" v-model="orno" required="" v-on:input="checkLimit" maxlength="3"><p>error</p>

2 Answers
2

You should set the error to '' when the e.status is true. Like this

error

''

e.status

success: function (e)
if (e.status == true)
vm.error = '';
else
console.log(e.msg);
vm.error = e.msg;

,


Simple: in checkLimit do vm.error=null on success. Then in the template do <p v-if="error">error</p>.

checkLimit

vm.error=null

<p v-if="error">error</p>

Since in vue all data is reactive p will disappear when error is falsy.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.