vue判断input值为空时，返回错误信息？

Question

如题，input为空的时候，不再dom上显示错误信息，这个是怎么回事？

<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:"#form",
               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 = "用户名不能为空";
                       }
                   },
               }
               });

Answer 1

我这边是有的，只不过是在input失去焦点之后出现的。

要想马上出现，可以使用watch

watch: {
    resourcesname: function (newval,oldval) {
      if (this.resourcesname != "") {
        this.errname = "";
      } else {
        this.errname = "用户名不能为空";
      }
    }
},

Answer 2

可以多绑定一个keyup事件，keyup事件在键盘按下后弹起时触发，而change是在失去焦点后才触发的

@keyup="checkname"