mac_05185 2022-11-07 15:41 采纳率: 67.1%
浏览 68
已结题

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

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

img

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

<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>

  • 写回答

3条回答 默认 最新

  • hfhan_872914334 2022-11-07 15:59
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 浪在前端 2022-11-07 15:59
    关注

    子组件不要直接去修改父组件传过来的数据(props)

    评论
  • 经海路大白狗 前端领域优质创作者 2022-11-07 15:53
    关注

    这样,既然提示你myChannels不能用push了,肯定是数组在哪一步坏了,你一步一步打印一下,光这么看死代码很难看出问题来的

    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月7日
  • 已采纳回答 11月7日
  • 创建了问题 11月7日

悬赏问题

  • ¥50 74LS系列 74LS00 74LS04设计一个RS485电路(关键词-差分)
  • ¥30 各位help写一下代码
  • ¥15 在运行SDEdit模型下载不了
  • ¥15 求51控制l298n驱动的小车中超声波避障怎么写
  • ¥15 电脑连上WIFI却用不了
  • ¥30 MATLAB在RLC电路的固有响应和阶跃响应GUI仿真报告
  • ¥15 hyper-v出现的问题
  • ¥15 有能用的可加酬金,求可以批量下载懒人听书的软件,能登录自己帐号的。
  • ¥100 高博一起做RGB-D SLAM(5)VO无法出visualisation问题
  • ¥15 使用matlab进行手眼标定的仿真验证,得到齐次矩阵与opencv相差较大