-
软萌猫2018-11-28 00:00
- 27
- 0
这是报错信息### 问题描述
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'
}
}
你期待的结果是什么？实际看到的错误信息又是什么？
功能能正常实现,不知道为啥报错 以及解决报错
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
长街旧人 普通会员 1楼在 Vue (包括 Nuxt.js) 中，props 数据绑定的报错通常有以下几种情况： 1. 父组件向子组件传递数据时类型不匹配： 父组件传递给子组件的 prop 数据类型与子组件中声明的 prop 类型不符，例如子组件定义了 `String` 类型的 prop，父组件却传入了一个 `Number` 类型的数据。 ```vue // 子组件 Child.vue props: { title: String // 声明为字符串类型 } // 父组件 Parent.vue
// 传入了一个数字 ``` 这种情况下，Vue 会在控制台抛出警告。 2. 忘记使用 `v-bind` 或 `:` 绑定 prop： 在 Vue 中，需要使用 `v-bind` 或其简写 `:` 来动态地绑定数据到 prop。 错误示例： ```vue ``` 正确示例： ```vue ``` 3. 修改了 prop 的值： Vue 中 prop 的设计是单向数据流，即从父组件流向子组件，子组件不应该直接修改 prop 的值。如果你试图修改 prop，Vue 会发出警告。 错误示例： ```vue // 子组件 Child.vue props: { myProp: String }, methods: { changeProp() { this.myProp = '新的值'; // 直接修改 prop，会导致警告 } } ``` 正确做法是在子组件内部通过计算属性、局部状态或自定义事件来处理 prop 数据。 4. 非 props 属性错误地使用了 `v-bind`： 如果你在一个组件标签上使用了 `v-bind` 或 `:`，但该属性并不是组件接收的 prop，也会导致错误。 错误示例： ```vue ``` 请确保传递的 prop 名称与子组件声明的 prop 名称一致。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部