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: “cxInfoList”
大概意思是:避免直接改变属性,因为每当父组件重新渲染时,该值将被覆盖。相反,使用基于属性值的数据或计算属性。通过props传递给子组件的cxInfoList,不能在子组件内部修改props中的cxInfoList值。
<van-tabs
class="top-tab"
v-model="topActive"
v-if="cxInfoList"
@click="topChange"
title-active-color="#fc5c5c"
color="#fc5c5c"
>
<van-tab v-for="(items, key) in cxInfoList" :key="key" :title="items.title" :name="items.key" />
</van-tabs>
<script>
export default {
name: 'ChartTab',
props: {
cxInfoList: Array,
topActive: {
type: String,
required: true,
},
},
}
</script>
修改:不直接使用该参数 通过temp接收该props中的参数 使用temp
<van-tabs
class="top-tab"
v-model="topActive"
v-if="cxInfoListTemp"
@click="topChange"
title-active-color="#fc5c5c"
color="#fc5c5c"
>
<van-tab v-for="(items, key) in cxInfoListTemp" :key="key" :title="items.title" :name="items.key" />
</van-tabs>
<script>
export default {
name: 'ChartTab',
props: {
cxInfoList: Array,
topActive: {
type: String,
required: true,
},
},
data() {
return {
// 避免直接修改props
cxInfoListTemp: this.cxInfoList,
}
},
}
</script>