Vue avoid mutating a prop directly since the value will be overwritten
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue Learn</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script> </head>
<body>
<form id="form" method="post">
<login></login>
</form>
<script src="./js/vue/v1.js"></script>
</body>
</html>
(function(w) {
Vue.component('login', {
props: ['uName', 'uPwd'],
template: '<section class="login">' +
'<div class="form-group"><label>用户名</label><input id="txtUser" v-model="uName"/></div>' +
'<div class="form-group"><label>密码</label><input id="txtPwd" type="password" v-model="uPwd"/></div>' +
'<div class="form-group"><input type="submit" value="提交" v-bind:disabled="btndisable"/></div></section>',
computed:{
btndisable:function(){
return (this.uName||'').length>0&&(this.uPwd||'').length>0?false:true;
}
}
});
new Vue({
el: '#form'
})
})(window)
运行后,在用户名输入,console界面中弹出警告:
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: "uName" 。
修改之后：
(function(w) {
Vue.component('login', {
props: ['uName', 'uPwd'],
template: '<section class="login">' +
'<div class="form-group"><label>用户名</label><input id="txtUser" v-model="name"/></div>' +
'<div class="form-group"><label>密码</label><input id="txtPwd" type="password" v-model="pwd"/></div>' +
'<div class="form-group"><input type="submit" value="提交" v-bind:disabled="btndisable"/></div></section>',
data:function(){
return {
name:"",
pwd:""
}
},
computed:{
btndisable:function(){
return (this.name||'').length>0&&(this.pwd||'').length>0?false:true;
}
}
});
new Vue({
el: '#form'
})
})(window)
运行OK,没有警告。
总结：
1.v-model 默认是双向绑定,开始时使用默认 属性uName 双向绑定,意味着存在,组件内部 修改uName,从而影响外部 组件的风险。
2.改正后,在组件内部再构建一套属性域,从而与外界解耦
Vue avoid mutating a prop directly since the value will be overwritten的更多相关文章
- [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 paren
今天在做Vue的时候,子组件关闭的时候,报如下错误 报错:vue.esm.js?65d7:610 [Vue warn]: Avoid mutating a prop directly since th ...
- 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. 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 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 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...
- Vue 错误：Avoid mutating a prop directly
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...
- (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案
报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component. ...
随机推荐
- Win10 OpenCV3.3.0+VS2013配置大坑，OpenCV解决方案编译报错“找不到python36_d.lib”错误
今天因为想要用OpenCV做图像识别,小白一个,在网上找到一个教程,但是需要配置OpenCV3.3.0的环境,于是又在网上找OpenCV3.3.0+VS2013(因为我之前已经安过了VS2013),前 ...
- raise与raise······from
在python中,如果想手动引发一个异常,我们一般都会使用raise # -*- coding:utf-8 -*- # @Author: WanMingZhu # @Date: 2019/10/22 ...
- kill命令和killall命令
kill命令用于终止指定的进程(terminate a process),是Unix/Linux下进程管理的常用命令.通常,我们在需要终止某个或某些进程时,先使用ps/pidof/pstree/top ...
- 二、CentOS 7安装部署GitLab服务器（解决邮箱发信问题）
一.环境安装(10.0.0) 1.安装依赖软件 yum -y install policycoreutils policycoreutils-python openssh-server openssh ...
- B+（B）树和B-树
转载自 http://www.cnblogs.com/nullzx/ 1.B树 定义:B树也称B-树,它是一颗多路平衡查找树.我们描述一颗B树时需要指定它的阶数,阶数表示了一个结点最多有多少个孩子结点 ...
- 【WinForm-TreeView】实现Win7 Areo效果
效果图: 新建一个继承自TreeView的控件类,代码如下: using System; using System.Windows.Forms; using System.Drawing; using ...
- cookie生命周期expires 时间过期，但是cookie没有被浏览器清理的问题
cookie生命周期expires 时间过期,但是cookie没有被浏览器清理的问题 今天用nodejs起了一个web服务,使用art-template模板引擎渲染出来的页面,在这里我设置了一个coo ...
- 基于c++回顾
c++类 特别的构造函数 默认参数: 几乎所有函数都可以使用默认参数,但在构造函数中最为普遍 初始化列表 用来直接初始化数据成员;与列表顺序无关,与成员申明顺序有关;如果一个成员是const的,那么, ...
- Visio：为什么按下方向键，选中的目标不动，绘图区（页面）却在移动
造冰箱的大熊猫,本文适用于Microsoft Visio 2007@cnblogs 2018/12/12 检查下键盘的“Scroll Lock”键是不是被激活了(键盘上对应的指示灯被点亮).Scrol ...
- mock的那点事
前言: Mock在GitHub上有12.9K的star可以看出,它在技术团队中是挺受欢迎的.这项技术被应用在不同领域的项目中. 适用场景: 下面我结合我们技术团队,列举最适合引入我们Mock服务的场景 ...