又是给怨种同桌找bug的一天

报错1:

vue.runtime.esm.js?c320:619 [Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error.

错误原因 :
一个ul里面循环了两个li ,两个的key 都为idx,导致第一个li在循环时产生了key=“0”,而第二个也会有key=“0”,以至于key="0"被重复检测报错

解决办法 : 将两个不同的li循环包在不同ul中

报错2:

错误原因 :

报错3:

错误原因 : 只能有一个根标签,此处有两个

解决办法: 删掉一个

问题4:

如何解决vscode进行vue格式化,会自动补分号和双引号的问题

在使用vscode开发vue项目时，严格检查让人有点烦恼，必然需要一款可以自动格式化的插件进行快速严格检查的格式化。vscode插件会推荐使用 vetur 插件才会进行vue文件的识别与高亮。

安装完 vetur 后确实是可以对 vue文件进行高亮显示了，但是当你按下 shift+alt+f 进行格式化时，发现本来没有错误的代码却变成了一堆错误，莫名加上了分号，单引号也成功变成双引号了。在vue的严格检查中这些是最烦的。

那么需要对vscode的配置文件进行配置才可支持vue正确格式化。

打开 文件 => 首选项 => 往下拉找到 settings.json => 打开

默认的 settings.json 配置项可能不一样，现在只需要往json中写入以下配置就可格式化vue啦。

"vetur.format.defaultFormatterOptions": {
 "prettier": {
  "semi": false,
  "singleQuote": true
 }
}

可能会出现 分号和双引号确实不会再自动添加了，但是不会在方法括号之间插入空格，可以再加入这条配置即可。

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

"vetur.format.defaultFormatter.js": "vscode-typescript"

最好再配置下vscode支持vue语言

"eslint.validate": [
 "javascript",
 "javascriptreact",
 "html",
  {
   "language": "vue",
   "autoFix": true
  }
]