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

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