When vue determines that the input value is empty, it returns an error message.

for example, when input is empty, an error message is no longer displayed on dom. What is going on?

<div class="am-form-group err-name" id="form">
                                    <label for="doc-ipt-3" class="am-u-sm-2 am-form-label"><strong>*</strong>:</label>
                                    <div class="am-u-sm-10">
                                        <input type="text" @change="checkname" v-model="resourcesname" id="resourcesName" name="resourcesname">
                                        <span class="err-plchod">{{errname}}</span>
                                    </div>
                                </div>
 var vm = new Vue({
               el:"-sharpform",
               data:{
                   url:"",
                   resourcesname:"",
                   sort:"",
                   errname:"",
                   masgurl:"",
                   masgsort:"",
                   isShow:false,
                   resourcesModular:{
                       "mk":"",
                       "gn":"",
                       "zy":"",
                   },
                   mydatas:[]
               },
               methods:{
                 checkname:function(){
                       if(this.resourcesname !=""){    
                           this.errname ="";
                       }else{
                          this.errname = "";
                       }
                   },
               }
               });
Mar.11,2021

clipboard.png

clipboard.png
I have it on my side, only after input lost focus.

to appear immediately, you can use watch

watch: {
    resourcesname: function (newval,oldval) {
      if (this.resourcesname != "") {
        this.errname = "";
      } else {
        this.errname = "";
      }
    }
},

you can bind more than one keyup event. The keyup event is triggered when the keyboard is pressed and popped up, while the change is triggered after losing focus

.
@keyup="checkname"
Menu