使用Vue.js，这些问题你都遇到了么？

1、当在父组件通过props传Array/Object类型值给子组件的时候，如果子组件的props接收default为

slides:{ 
    type:Array, 
    default:[] 
}
复制代码

时，系统会报错

Invalid default value for prop “slides”: Props with type Object/Array must use a factory function to return the default value.

英文提示的意思是：

Array/Object的默认返回值要用工厂形式返回。

所以我们要这样来写

slides:{ 
    type : Array, 
    default : function(){
        return [];
    }
}
复制代码

可以写成箭头函数，如下

slides:{ 
    type:Array, 
    default : ()=>{
        return [];
    }
}
复制代码

也可以

slides:{ 
    type : Array, 
    default () {
        return [];
    }
}
复制代码

---

2、过滤器格式化的时间（时间字符串带中横线），在电脑上ok的，放到ios上一看就出错了，显示NaN，一肚子的草泥马？

<span>开始时间 {{ item.startTime | formatTime('yyyy-mm-dd') }}</span>
复制代码

搞了半天原来是ios系统不支持中横线 – 的时间格式，改为斜杠 / 即可

filters: {
  formatTime(time, pattern = "") {
    var format = time.replace(/-/g, "/"); //把“-”，替换成‘/’
    var date = new Date(format),
      y = date.getFullYear(),
      m = (date.getMonth() + 1).toString().padStart(2, 0),
      d = date.getDate().toString().padStart(2, 0),
      h = date.getHours().toString().padStart(2, 0),
      mi = date.getMinutes().toString().padStart(2, 0),
      se = date.getSeconds().toString().padStart(2, 0);
    if (pattern == "yyyy-mm-dd") {
      return `${y}.${m}.${d}`;
    } else {
      return `${y}-${m}-${d} ${h}:${mi}:${se}`;
    }
  },
},
复制代码

---

3、’vue-cli-service’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

他猫猫滴，有时候原来正常的一个项目，突然就报这个错啦，怎么办？

解决的方法：

（1）、

npm install --global vue-cli
复制代码

（2）、

将项目里的“node_modules”文件夹删除，然后重新运行npm install

---

4、使用el-upload上传图片，发现当图片上传完成后，校验还在，没有消失，而我们需要的是图片上传完成后校验消失

使用el-checkbox-group代理，将form.imageUrl绑定在el-checkbox-group上
然后将校验的trigger值换成change即可

<el-checkbox-group 
  v-model="form.imageUrl" 
  v-show="false" 
  :rules="{ required: true, message: '请上传图片', trigger: 'change' } "
>
</el-checkbox-group>
复制代码

---

5、
Syntax Error: TypeError: Cannot read property ‘parseComponent’ of undefined

原因：

vue版本和vue-template-compiler版本不一致导致

解决：

（1）、删除node_modules

（2）、修改packge.json文件，修改vue-template-compiler和vue版本一致

（3）、npm install

（2021/6/3，在酒店中心项目hotel-center-admin经历过，按照以上方法，顺利解决）

---

6、项目运行不起来，报错

These relative modules were not found:
./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/@vue/cli-plugin-babel/node_modules

出现这个问题，其实是你vue文件里面导入的方法或者其他的东西更不存在，确认文件的相对路径是否正确，可以解决此问题

类似问题：

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/

原因路径出错，引入正确路径即可

---

7、
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “tableList” (found in component )

问题分析：

这种情况下会报这个错，是因为传入的prop中的值是不允许改变的。

解决：

创建针对props属性的watch来同步组件外对props的修改

附上报错时的代码：

     props:{
        // 不请求AJAX直接赋值表格数据
        tableList :{
          type:Array,
          default: () => {
            return null
          }
        },
      },
      methods:{
        clearTableRows(){
          this.tableList=[];
          this.autoGetPageList()
        },
        autoGetPageList(){ 
          if(this.tableList){
            if(this.tableList.length>0){
              let start=(this.currentPage-1)* this.pageSize;
              let end=start+this.pageSize;
              this.pageList = this.tableList.slice(start, end);
              this.pageCounts = this.tableList.length;
            }else{
              this.pageList = [];
              this.pageCounts = 0;
            }
          }else{
            this.getPageList();
          }
        }
      },
复制代码

我在clearTableRows 方法中直接修改了 属性 tableList 的值，所以报错啦。

修改后的代码：

在data中增加了dataList ，并赋值tableList，然后使用 watch 监听 tableList 变化，并对dataList 赋值。

      data(){
        return{
          dataList : this.tableList,
          pageList:[],
          sizeSelect:[10,20,40,50,100,120,200],
          pageSize:10,
          pageCounts:0,
          currentPage:1,
          pageShow:9
        }
      },
      watch: {
        tableList(val){
          this.dataList=val;
        }
      }
      methods:{
        clearTableRows(){
          this.dataList=[];
          this.autoGetPageList()
        },
        autoGetPageList(){ 
          if(this.dataList){
            if(this.dataList.length>0){
              let start=(this.currentPage-1)* this.pageSize;
              let end=start+this.pageSize;
              this.pageList = this.dataList.slice(start, end);
              this.pageCounts = this.dataList.length;
            }else{
              this.pageList = [];
              this.pageCounts = 0;
            }
          }else{
            this.getPageList();
          }
        }
      },
复制代码

---

8、
[Vue warn] Avoid using non-primitive value as key, use string/number value instead.

non-primitive这个单词表示的是对象，这里的[Vue warn]是指不要用对象或是数组作为key，用string或number作为key。

---

9、key值重复

（1）、

分析原因：

由于v-for循环里，key值可能重复了（自己造的数据或者后端给的数据问题），所以会报这个错

解决问题：

根据提示，使用排除法，定位到BtnMenu，原来是resId有重复，代码：

<el-button size="small" v-for="item in btMenus" :key="item.resId" class="interval" :type="item.resId" :icon="item.resIcon" @click="onClick(item.resCilck)">{{item.title}}</el-button>
复制代码

修改为：

<el-button v-for="(item,index) in btMenus" size="small" :key="item.resId+index" class="interval" :type="item.resId" :icon="item.resIcon" @click="onClick(item.resCilck)">{{item.title}}</el-button>
复制代码

:key=”item.resId+index”将保证key不在重复。

（2）、Duplicate keys detected: ‘8’. This may cause an update error.

错误截图如下：

看错误的的提示语,联系错误的时机，可以知道这个错误出现在我使用vue的循环中，循环，在vue或者小程序中，为了保证每一项的独立性，都会推荐使用key，所以综上所述，很可能是key出了问题，去查找关于key的代码，果然如此：

---

10、webpack 命令 Module build failed (from .node_modulesbabel-loaderlibindex.js)

在项目中运行的时候出现报错，错误为Module build failed (from ./node_modules/babel-loader/lib/index.js)