VUE报错：Avoid mutating a prop directly since the value will be overwwritten whenever the parent及解决方案

小半 • 2023年1月18日下午6:14 • 前端开发 • 阅读 103

VUE报错： [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: “list”

大概意思是：避免直接改变属性，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于属性值的数据或计算属性。通过props传递给子组件的list，不能在子组件内部修改props中的list值。

子组件：

<template>
          <div>
            <el-input
              v-model="barcode"
              clearable
              size="small"
              placeholder="请扫描条码编号"
              style="width: 200px"
              class="filter-item"
              @keyup.enter.native="toQuery"
            />
            <div style="margin-top: 10px">
              箱子号：{{ sonList.currentRfid }}
            </div>
          </div>
</template>

报错示例：

//接收了一个参数：
props: { list: { type: Object, default: "" } },
......
//做了一些修改,调用接口获取到新值，需要修改list值
metods：{
  getQuery（）{
    operatePos(this.queryParams).then((res) => {
        this.list = res.data
        })
      }
   }
}

这时候再使用list这个数据就会报错。

原因：

由于Vue内部的机制，传入的props中的值
是不允许被修改的。在新的渲染机制中，当父组件重新渲染时，子组件都被会覆盖，这时的props是不可变的。

解决：

在data中再定义两个新的变量，然后把父组件传过来的值赋值给新的变量，之后操作这两个新的变量即可。

<script>
  export default {
    name: "scanPacking",
    props: { list: { type: Object, default: "" } },
    data() {
      return {
      queryParams: {}, //传参
       //重新定义一个变量接收父组件传过来的值 避免直接修改props
      sonList: this.list,
    };
  },
};
metods：{
  getQuery（）{
     operatePos(this.queryParams).then((res) => {
        this.sonList= res.data
     })
    }
 }
</script>

页面标签中使用：

 <div style="margin-top: 10px">
              箱子号：{{ sonList.currentRfid }}
 </div>

文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/79194.html

VUE报错：Avoid mutating a prop directly since the value will be overwwritten whenever the parent及解决方案

子组件：

这时候再使用list这个数据就会报错。

原因：

解决：

相关推荐