报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren
今天在做Vue的时候,子组件关闭的时候,报如下错误
报错:vue.esm.js?65d7:610 [Vue warn]: 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: "isVisible"
问题解决:
父组件里面调用子组件的代码
<NoteBookLimitFlow :isVisible="isShowFlowSearch"></NoteBookLimitFlow>
isVisible用来判断是否显示子组件
子组件里面的代码
<el-dialog title="XXXX"
:visible.sync="IsShowPage"
@close="closeForm()">
</el-dialog> watch: {
isVisible(val) {
this.IsShowPage = val;//新增isVisible的watch,监听变更并同步到IsShowPage上
}
}, data() {
return {
//定义一个IsShowPage来接收传递过来的值
IsShowPage: this.isVisible,
}
}
报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren的更多相关文章
- vue报错 [Vue warn]: 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
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...
- Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...
- Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"
一.报错截图 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...
- [Vue warn]: 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
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...
- 报错:[Vue warn]: 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 bei
项目中遇到父组件传值 activeIndex <Tabs :tabs="tabs" :activeIndex="activeIndex" >< ...
- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re
子组件修改父组件的值踩坑 Vue1.0升级至2.0之后,直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据. 我们都知道在vue中,父组件传入子组件的变量是存放在props属性 ...
- Vue avoid mutating a prop directly since the value will be overwritten
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案
报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component. ...
- Vue 错误:Avoid mutating a prop directly
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...
随机推荐
- sql 修改数据
关系数据库的基本操作就是增删改查,即CRUD:Create.Retrieve.Update.Delete.其中,对于查询,我们已经详细讲述了SELECT语句的详细用法. 而对于增.删.改,对应的SQL ...
- 【dart学习】-- dart 安装开发环境
前言 说明下:本人只有window和mac,所以安装实践只有这两种,其他的自行尝试.简介:Dart是谷歌开发的计算机编程语言,后来被Ecma (ECMA-408)认定为标准 [1] .它被用于web. ...
- cgroup & oom-killer 简介
cgroup内存限制 memory.failcnt memory.limit_in_bytes memory.usage_in_bytes memory.max_usage_in_bytes memo ...
- git分布式版本控制系统权威指南学习笔记(六):git reset、get stash、git checkout总结
文章目录 1. 概述 2. 如何把修改暂存起来,留着以后使用? 2.1 使用场景 2.2 git stash 暂存进度 2.3 查看进度 2.4 恢复进度 3. 如何撤销工作区的修改? 4. 如何把暂 ...
- linux 创建多级目录 mkdir -p
原文地址:http://www.dutor.net/index.php/2010/06/cmd-mkdir-p/ mkdir的-p选项允许你一次性创建多层次的目录,而不是一次只创建单独的目录.例如,我 ...
- JUC源码分析-集合篇(七)PriorityBlockingQueue
JUC源码分析-集合篇(七)PriorityBlockingQueue PriorityBlockingQueue 是带优先级的无界阻塞队列,每次出队都返回优先级最高的元素,是二叉树最小堆的实现. P ...
- Stack,ArrayDeque,LinkedList的区别
本文首发于cartoon的博客 转载请注明出处:https://cartoonyu.github.io/cartoon-blog 这段时间把疯狂JAVA再看了一遍,发现Stac ...
- PyUnit (unittest) 的用法
PyUnit(unittest) 是 Python 自带的单元测试框架,用于编写和运行可重复的测试.PyUnit 是 xUnit 体系的一个成员,xUnit 是众多测试框架的总称,PyUnit 主要用 ...
- 【HDOJ】P2058 The sum problem
题意很简单就是给你一个N和M,让你求在1-N的那些个子序列的值等于M 首先暴力法不解释,简单超时 再仔细想一想可以想到因为1-N是一个等差数列,可以运用我们曾经学过的只是来解决 假设开始的位置为s,结 ...
- ArrayList、Vector、LinkedList的区别
ArrayList.Vector.LinkedList的区别 1.底层数据结构: ArrayList底层实现是动态数组 Vector底层实现是动态数组 LinkedList底层实现是双链表 2.扩容 ...