Vue遇到的问题记录

【数据操作】

一、v-for

1、vue报错Duplicate keys detected ''. This may cause an update error

1.1 问题原因

        使用v-for的时候，出现了重复的key，导致控制台报错，但控件能正常渲染。

1.2 解决办法

        检查key是否存在重复，引号内则为重复的key，修改key为唯一值即可。

2、在v-for循环里面修改数据无效，值不会更改

1.1 问题描述

        在循环里面传入index修改该角标下的数组元素，修改无效；传入子元素，修改也无效，只在方法体里面局部有效；如下：

doCheckOne(index, item) {
  item.isChecked = !item.isChecked;
  this.messageList[index].isChecked = false;
},

1.2 问题原因

        Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。

1.3 解决办法

        使用this.$set来操作更新数组中的元素。

Vue中this.$set的用法 // 数组：第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值 // 对象：第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值 Vue.set(target, propertyName/index, value)

doCheckOne(index, item) {
  item.isChecked = !item.isChecked;
  this.$set(this.messageList, index, item);
},

【Vue-Router】

一、传值问题

1、使用params传值，用this.$route.params无法取到值

1.1 问题描述

        使用params传值，用this.$route.params无法取到值

1.2 解决办法

        params需要与name一起使用，this.$router.push({ name: '', path: '', params: {}})

【Vant - 移动端框架】

一、折叠面板van-collapse

1、使用折叠面板van-collapse，手风琴模式，change事件后，接收到的activeNames参数为上一个点击的值

1.1 问题描述

       一个item项要点击两次才是最新的值

 将activeNames参数传入后，获取到的值与上次点击的值一致，并非最新的；

仔细看了下vant文档，原来change事件自带传入activeNames参数，不需要自己传入，自己传入为回调后的结果；直接将参数去掉，change方法取到的参数即为最新值

像下面有括号也不行哦，vue认为这是无参：

 1.2 解决办法

 

二、vant文件上传

1、后台报错：Content type 'multipart/form-data;boundary=----      WebKitFormBoundarymn2IDPynGhlHwALI;charset=UTF-8' not supported；

1.1 解决办法

        去掉：@RequestBody