Vue中常用知识点的汇总及常见坑的排查

2020年05月29日 00:08


1. Vue中动态变量的绑定

vue中v-model变量的绑定,要求变量需要先有在data里声明过。


当遇到v-for遍历数据时,v-model里变量就需要每一次都不一样。直接用后端唯一性数据作为变量,虽然保证了for遍历后,v-model绑定的变量都不一样,但是这些变量并没有在data里有声明,所以也会报错。


解决方法就是:

现在data里定义一个变量,然后在created方法里获取后端接口数据时,再初始化每一个v-model要绑定的变量。


例如,后端接口有个唯一性id数据。

先在data里定义个变量:

info_arr: []


然后created方法里调用后端接口,遍历接口结果,初始化数据:

created: function(){
backend_api({
}).then( (res) => {
res.data.data.forEach( item=> {
this.$set(this.info_arr, "info_" + item.field_name, '');
});
})
}


最后在页面v-for里,v-model动态绑定变量,你就可以如下这样用了:

<div v-for=" item in api_data"  v-model="info_arr[item.field_name]" >... </div>



2. Loading Chunk 0 failed错误的快速解决

很囧,翟码农第一次遇到这个错误,是因为路由path写错的原因。

有一个路由被我写成如下:

{
name: '/',
path: ‘/获取后台数据’
...
}

可让我找了好久呢


第二次又遇到这个问题,数字0变成其它数字了:Loading Chunk 7 failed。

结果更让人匪夷所思,正在开发的页面不报错,但是其它页面点击事件里调用route.push时就报上面错,导致页面无法跳转。


把当前正开发的页面全部清空,其它页面就正常了。


实在没有头绪,最后通过一部分一部分屏蔽代码的方式,最终找到了问题所在之处: 一行import后端某个接口的代码。

别的每个详情页面都有这行代码,不知道为何单单正在开发的这个页面会导致这个问题。



3. vue中页面跳转,参数不能正常获取

经百度,网上大多说的是params和query的区别。


关于两者区别,这里翟码农将总结顺便记录一下:

query搭配path,params必须与name一起

具体如下:

this.$router.push({path: ' 路由 ', query: {key: value}})
this.$router.push({name: ' 路由的name ', params: {key: value}})


不过翟码农踩的不是这个坑,而是这个坑:

this.$route.query.id写成了this.$router.query.id


说实话,因为单词拼写造成的问题,再加上错误信息不明朗,真的是有时候坑你一个通宵都不为过,所以

复制粘贴玩得溜的人,就是牛人


4. 表格渲染动态列无效

avue-crud,本身就支持表格头部tableOption和表格数据部分tableData的动态绑定。


当表格的列是固定时,我们只需要引入一个关于列配置的json对象,赋值给tableOption就好了。


当列是动态的时候,即由后端接口的数据控制时,翟码农在接口回调函数里,遍历结果组装了tableOption,可是表格却总是渲染失败。


对Vue动态绑定理解不到位,起初以为是表格渲染在前头,获取表格头部数据接口则是在渲染之后才调用,所以导致表格无法正常渲染。


经过跟朋友咨询,才意识到v-model的功效,Vue就是玩这个的:动态绑定。只是翟码农是因为数据格式不对,才导致这个动态绑定无法触发。


翟码农踩的坑,在于自己组装tableOption的代码不对:

res.data.data.list.forEach( function(item, index){
_this.tableOption.column[index] = {
minWidth:120,
search:false,
label:item.TITLE,
prop:item.FIELD_CODE,
align:'center'
}
})


问题就出在这个索引上,从php角度理解,本人还以为0,1,2这样的整数索引并无妨碍呢。


后来换成push直接往column数组添加数据就ok了。

_this.tableOption.column.push({...})


本文为翟码农个人博客里有关前端技术的原创文章,转载请注明出处:http://www.zhai14.com/blog/summary-of-the-experience-of-vue.html



  • 2020年05月28日 23:05文章创建
  • 2020年05月29日 00:08文章发布
我要评论
«-必填,限2-20个字符,中文/字母/字母数字组合
«-评论后,邮箱会收到激活链接,未激活邮箱的留言,将无法显示
评论列表
暂无评论,期待你的评论哦!
回到顶部