vue提示我array属性不合法 无法push元素

Question

vue lint fix提示我Unexpected mutation of "myChannels" prop vue/no-mutating-props

给出代码，这个是怎么个报错原因我没太想明白：

<template>
  <div class="channel-edit">
    <van-cell :border="false">
      <div slot="title" class="title-text">我的频道</div>
      <van-button class="edit-btn" type="danger" plain round size="mini">编辑</van-button>
    </van-cell>
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item class="grid-item" v-for="(channel, index) in myChannels" :key="index" icon="clear">
        <span class="text" :class="{ active: index === active }" slot="text">{{ channel.name }}</span>
      </van-grid-item>
    </van-grid>

    
    <van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item class="grid-item" v-for="(channel, index) in recommendChannels" :key="index" icon="plus"
                     :text="channel.name" @click="onAddChannel(channel)" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels } from '../../../api/channels'

export default {
  name: 'channel-edit',
  components: {
  },
  data () {
    return {
      allChannels: [] // 所有的频道
    }
  },
  computed: {
    // 计算属性会监控内部属性的变化 TODO 若依赖数据变化 则计算属性重新执行
    recommendChannels () {
      // filter方法 会把符合条件的新方法加入到新的数组中去
      return this.allChannels.filter(channel => {
        // 数组的find方法 遍历数组 然后把符合条件的第一个元素返回
        return !this.myChannels.find(myChannel => {
          return myChannel.id === channel.id
        })
      })
    }
    // recommendChannels () {
    //   const channels = []
    //   this.allChannels.forEach(channel => {
    //     const ret = this.myChannels.find(myChannel => {
    //       return myChannel.id === channel.id
    //     })
    //     // 若频道不包含 则添加到推荐频道中
    //     if (!ret) {
    //       channels.push(channel)
    //     }
    //   })
    //   return channels
    // }
  },
  created () {
    this.loadAllChannels()
  },
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  methods: {
    async loadAllChannels () {
      try {
        const { data } = await getAllChannels()
        this.allChannels = data.data.channels
        console.log(data, '这里是请求的频道筛选列表')
      } catch (err) {
        this.$toast('数据获取失败~')
        console.log(err, '<<< 数据获取失败的error info')
      }
    },
    onAddChannel (channel) {
      console.log(channel, `点击了${channel.name}`)
      this.myChannels.push(channel)
    }
  }
}
</script>

<style scoped lang="less">
  .channel-edit {
    padding: 85px 0;

    .title-text {
      font-size: 32px;
      color: #333;
    }

    .edit-btn {
      width: 104px;
      height: 48px;
      font-size: 26px;
      color: #f85959;
      border: 1px solid #f85959;
    }

    /deep/ .grid-item {
      width: 160px;
      height: 86px;

      .van-grid-item__content {
        white-space: nowrap;
        background-color: #f4f5f6;

        .van-grid-item__text, .text {
          font-size: 28px;
          color: #222;
          margin-top: 0;
        }

        .active {
          color: red;
        }
      }
    }

    /deep/ .my-grid {
      .grid-item {
        .van-icon-clear {
          position: absolute;
          right: -10px;
          top: -10px;
          font-size: 30px;
          color: #cacaca;
          z-index: 2;
        }
      }
    }

    /deep/ .recommend-grid {
      .grid-item {
        .van-grid-item__content {
          flex-direction: row;

          .van-icon-plus {
            font-size: 28px;
            margin-right: 6px;
          }
        }
      }
    }
  }
</style>

Answer 1

不能直接修改父组件传递过来的数据，如果需要修改可以使用$emit进行通信，在父组件进行修改，或者使用.async修饰符，如果不需要通知到父组件，可以在数据接收的时候复制一份数据到子组件内，子组件使用复制的数据进行操作