element中实现el-input实现回车查询遇到的坑

如下
 

            

                

                     v-model="searchForm.hotWord" 

                     maxlength="100" 

                     placeholder="请输入关键词查询" 

                     @change="_searchClick">

               

            

_searchClick(){

    ...这是查询逻辑 此处省略...

}

我们会发现当我们按回车的时候 回先进行查询 然后会整个刷新页面 

原因:el-form中如果就只有一个el-input 就会出现这个问题 这是el-form中的一个坑
解决方案

@submit.native.prevent> 

   

                

                     v-model="searchForm.hotWord" 

                     maxlength="100" 

                     placeholder="请输入关键词查询" 

                     @change="_searchClick">

               

            

我们只需要在el-form上加上@submit.native.prevent就可以实现我们想要的功能了

你可能感兴趣的:(element中实现el-input实现回车查询遇到的坑)