Vue中遇到的BUG总结

1. keyup.native.enter无法解决的时候

• 描述：

  keyup.native.enter=“search”,可以解决敲回车之后不会重新加载当前路由：
  但是当search的元素只有一个input时候，此方式失效.

• 解决方法：

  当input的个数大于一的时候就不会，出现这个问题。
  方法一： 新加一个input, 加hidden。
  方法二： 经查询得知： 在el-form标签中加上 @submit.native.prevent，阻止表单的默认行为。
  因为只有一个input的时候触发了提交报表单事件。

2. el-upload组件

上传组件：绑定的值是list
action属性针对需要在header传递token的case不适用，需要使用http-request
上传组件遇到的问题

3. el-input组件

@input和@change和@blur的区别

4. rules的问题

• 校验不对的问题：
  是因为定义在this里面的变量值发生了改变，触发了rules指定的字段的校验规则。从而出现了校验的错误。

5. el-select问题

• 如图
  

• 说明：

  纠结的事情就是：这种情况出现了很多次，每次都排查很久。

• 出现的情况： 在几级联动需要使用到el-select组件。

  在添加的时候没有出现这样的问题，但是在修改的时候很容易出现。
  特别是讲将 form.a 赋值给form.b这就会出现一种情况，form.a的改变老是影响form.b

• 对比：

    //错误的代码：
	var resp = response.data;
	this.form = resp;
	this.form.cityId = resp.cityName;
	this.form.provinceId = resp.provinceName;
	本来的response的data里面有cityId的值和provinceId的值， 但是我们又重新的赋值了一次。
	改正之后的代码：
　　 var resp = response.data;
     // 此处解决选择市之后不展示label的情况
     this.form.cityId = resp.cityName;
     this.form.provinceId = resp.provinceName;
     this.form.id = resp.id;
     this.form.bankName = resp.bankName;
     this.form.branchName = resp.branchName;
     this.form.branchId = resp.branchId;
     this.form.bankCode = resp.bankCode;

6. el-table-colomn 组件

• 使用template的slot-cope的时候前面加了：导致出现了错误。解决了一阵子

7. el-dialog的close-on-click-modal的使用

• 前面加了：，导致不生效。正确的代码是
• close-on-click-modal = “false”, 默认值是true(点击空白弹框消失)

8. watch不触发

参考

10. 在search搜索之后，点击重置， 但是搜索条件不清空

• 检查的要素，首先restForm没有生效，但是这个排查不对，原因是： v-model绑定的值，对应的prop不一致导致。
  –
  
  
  以上是正确的，如果prop=“usBankNo1”, 就不正确。

11. 搜索回车,搜索方法handleQuery

• input

<el-input v-model="queryParams.acceptor" placeholder="请输入承兑人" clearable size="small"` @keyup.enter.native="handleQuery" />

• el-date-picker

<el-form-item prop="nextTime">
        <el-date-picker
          v-model="queryParams.nextTime"
          clearable
          size="small"
          style="width: 200px"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择计划访问时间"
          @change="handleQuery"
        ></el-date-picker>
      </el-form-item>