Vue报错: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: “selectedPage”;

这里发生的问题是:

子组件修改父组件的值导致报错,这里应该避免直接修改父组件的值。应该在data里面重新命名selectedPage这个字段。就可以解决问题。

import {mapState} from 'vuex'
export default {
  name: 'DynamicTabs',
  props: ['selectedPage'],
  computed: {
    ...mapState({
      tabs: state => state.aliveTabs.aliveTabs
    })
  },
  methods: {
    async initData () {
      // const datas = await getAddress()
      console.log(this.tabs)
    },
    handleRadioChange (key, keyPath) {
      console.log(key, keyPath)
      this.$emit('handleTabsChecked', key, keyPath)
      this.$router.push(key)
    },
    handleSelectedAside (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  data () {
    return {
    //这里重新命名这个selectedPage字段,解除报错。
    //删除这句,就会报错
      selectedTabsPage: this.selectedPage
    }
  },
  created () {
    this.initData()
  }
}

Logo

前往低代码交流专区

更多推荐