插件解决vue3.2 error Unexpected mutation of "datas" prop vue/no-mutating-prop
时间: 2024-05-11 08:18:16 浏览: 20
这个错误是因为Vue 3.2引入了一个新的规则来防止直接修改props中的数据。这是为了更好地保护应用程序的健壮性和可维护性。
要解决这个错误,有几种方法:
1. 在组件中使用一个本地的变量来存储props中的数据,然后对该本地变量进行修改。
例如:
```
<template>
<div>
<button @click="updateDatas">Update datas</button>
</div>
</template>
<script>
export default {
props: {
datas: Array
},
data() {
return {
localDatas: this.datas
}
},
methods: {
updateDatas() {
this.localDatas.push({ id: 4, name: 'John' });
}
}
}
</script>
```
2. 使用计算属性来返回props中的数据,并在计算属性中进行修改。
例如:
```
<template>
<div>
<button @click="updateDatas">Update datas</button>
</div>
</template>
<script>
export default {
props: {
datas: Array
},
computed: {
localDatas: {
get() {
return this.datas;
},
set(value) {
this.$emit('update:datas', value);
}
}
},
methods: {
updateDatas() {
const updatedDatas = [...this.localDatas, { id: 4, name: 'John' }];
this.localDatas = updatedDatas;
}
}
}
</script>
```
这些方法都可以解决这个错误,具体选择哪一种方法取决于你的具体情况。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)