vue(nuxt.js)中props数据绑定的报错

Question

这是报错信息### 问题描述
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: "name"
查了一下大概说是props使用错误,但是没看懂是为啥,说是不允许双向数据绑定造成额

问题出现的环境背景及自己尝试过哪些方法

用的nuxt.js

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

      <div v-if="item.videoUrl" class="video-panel">
        <span class="title">{{ $t('companies-index.video') }}</span>
        <div class="video">
          <div @click="playpause">
            <div><van-icon ref="videoIcon" name="play" size="1rem" color="white" /></div>
            <!-- <img src="~/assets/img/vr_start.png" alt="" /> -->
          </div>
          <video ref="video" :src="$cdn(item.videoUrl)" :poster="poster">
            {{ $t('companies-index.video-error') }}
          </video>
        </div>
      </div>
      
//视频播放按钮
playpause() {
  let myVideo = this.$refs.video
  if (myVideo.paused) {
    myVideo.play()
    this.$refs.videoIcon.name = null
  } else {
    myVideo.pause()
    this.$refs.videoIcon.name = 'pause'
  }
}

你期待的结果是什么？实际看到的错误信息又是什么？

功能能正常实现,不知道为啥报错 以及解决报错

Answer 1

# 2个方法

第一个 ：

// 父组件
<dialog-apply :visible.sync="dialogApplyVisible" />

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {
  this.$emit('update:visible', false)
}

第二个 ：

// 父组件
<dialog-apply :visible.sync="dialogApplyVisible" @close='dialogApplyVisible = false' />

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {
  this.$emit('close')
}

---

这2个方法 ， :before-close 是关键 ；

Answer 2

不能在计算属性computed里面改这个name的值 在data里面新起一个变量用v-if v-else控制van-icon的样式即可

      <div v-if="item.videoUrl" class="video-panel">
        <span class="title">{{ $t('companies-index.video') }}</span>
        <div class="video">
          <div @click="playpause">
            <div v-show="isIconShow">
              <van-icon v-if="isIconPlay" size="1rem" color="white" name="play" />
              <van-icon v-else size="1rem" color="white" name="pause" />
            </div>
          </div>
          <video ref="video" :src="$cdn(item.videoUrl)" :poster="poster">
            {{ $t('companies-index.video-error') }}
          </video>
        </div>
      </div>
      
    playpause() {
          let myVideo = this.$refs.video
          if (myVideo.paused) {
            myVideo.play()
            this.isIconShow = false
            this.isIconPlay = false
          } else {
            myVideo.pause()
            this.isIconShow = true
          }
        }