初学vue踩过的坑

作为一枚Java程序员，因项目需要去写vue前端，边学边写，也是痛苦。但好歹有些小收获，下面皆是开发过程中本人遇到的一些小坑大坑，记录一下，以免忘记。

1，下拉框选择之后，鼠标移入显示“x”号，需在select标签加clearable ；

2，vue删除数组中的某一项：this.$delete(array,num)。（array是数组，num是要删除的数组的下标。）

3，vue查询的时候，如需字段未定义，则可以这样判断：
if（item=== undefined） {}

4，判断一个字符串中是否包含某个字符串，,比如是否包含“/”可以这样写：
if（（item.indexOf(’/’)）！== -1）{} // true表示包含

5，拆分数组，比如以“/”拆分：array.split(’/’);

6，Replace():字符串可以用replace将某个字段转为另一个字段；

7，i-view的render，标准用法
render: (h, params) => {
return h(‘i-button’，params)
}
其中，“i-button”的位置可以写各种标签。

8，vue中经常会看到这样的代码：
this.$refs{[}^{\prime }refFor{m}^{\prime }].validate((valid)=>);或this.$refs[‘refForm’].validForm();

其中，refForm指代的是整个表单的数据，一般表单会有个”ref=“refForm”“的属性，代表整个表单。validate是表单自带的方法，用于验证表单数据是否符合设置好的formRule规则。
如果refForm来自另外一个vue文件，并且里面有validForm()方法，则可以直接引用，前提是要在这个页面导入另外一个vue文件。导入之后，就可以这样调用另一个文件中的方法了：
this.$refs[‘refForm’].validForm();
当然其他方法也行。

9，有时候表单的所有项都填写了，并且写对了，但是还是点击“提交”，还是报“表单输入有误”，发生这种情况的原因可能是：存在根据条件显示的输入框，当前条件是不显示，但是验证中又写了这项不能为空，所以会报“表单输入有误，且界面还没有提示”。

10，如果要调用后台接口，最好不要直接写 this.ajax…，建议先写“var me = this; me.ajax…”虽然我也不知道为什么。

11，如果下拉框的值不能为空，应该使用“change”进行触发。

12，如果报“Cannot read property ‘forEach’ of undefined"，一般出现在下拉框中，仔细检查是否正确。

13，如果控制台报“Invalid handler for event “click”: got undefined”这个错误，一般是@click绑定的方法不存在，不一定是你测试的方法，是整个页面可能存在这样的未定义的方法。

14，有时候造下拉框的数据时，明明已经写了数据，页面却展示不出来，可能的原因是“label”这个单词写错了。

15，定时器setTimeOut。碰到过在发送查询语句的代码的后面根据返回值去封装其他参数，结果查询请求返回有结果，根据结果去赋值去失败，原因是，查询语句会发请求到后台，需要一定时间，但是vue执行查询代码之后，并不会等着请求返回结果，而是发送请求之后就会执行下一句代码，这时查询结果还没返回，那么赋值自然就会失败。此时可使用定时器延迟赋值封装。

16，vue异步加载-nextTick()：在下次DOM更新循环结束之后执行延迟回掉。在修改数据之后立即使用这个方法，获取更新后的DOM。
应用场景：需要在视图更新之后，基于新的视图进行操作。
注意：在created 和 mounted阶段，如需操作渲染后得视图，也要使用nextTick方法。
即：

mounted:function(){
	This.$nextTick(function(){
	})
}

17,若有连续赋值的情况，如果出现前面赋值成功，后边赋值失败，那么检查一下，是不是前面赋值的部分的代码有问题，如果有问题，一定要解决，不然很可能影响后边的赋值。

18，如果控制台一直报“Error in render:‘TypeError:Cannot read property ‘length’ of undefined’”,可能的原因是：有字段没有值,或者根本就没有定义，类似于后台的“空指针”。所以这个时候要找那些要进行二次封装处理的数据。

19，若类似这样的代码“formObj.payType.indexOf(‘2’)!=-1”报“indexOf没有定义，实际上是payType没有定义，只要我们定义好payType就不会报错了”。

20，验证"复选框"是否有值时候，需加上“type:array”,否则vue不能识别出是否勾选复选框。

21，i-view，select下拉框中，若数据没有居左展示，可能的原因之一是：{{item.label}}前有空格。解决办法是：将标签放一行。

更新中…