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失去焦点之后出现的。要想马上出现，可以使用watchwatch: {&nbsp; &nbsp; resourcesname: function (newval,oldval) {&nbsp; &nbsp; &nbsp; if (this.resourcesname != "") {&nbsp; &nbsp; &nbsp; &nbsp; this.errname = "";&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.errname = "用户名不能为空";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }},

Answer 2

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