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. ...
随机推荐
- 用 Portainer 远程管理 docker
参考的官网地址为:https://portainer.readthedocs.io/en/stable/deployment.html 先更新Centos docker 镜像加速地址: curl -s ...
- Hive的视图和索引（九）
Hive的视图和索引 1.Hive Lateral View 1.基本介绍 Lateral View用于和UDTF函数(explode.split)结合来使用. 首先通过UDTF函数拆分成多行 ...
- java中有个很强大的工具jconsole.exe
这个工具可以监控java程序的线程,cpu和内存使用情况.
- java8学习之Lambda表达式继续探讨&Function接口详解
对于上次[http://www.cnblogs.com/webor2006/p/8186039.html]已经初步引入的Java8中Stream流的概念,其中使用了map的操作,它需要接受一个Func ...
- 【ZJOI 2016】旅行者
题意 http://uoj.ac/problem/184 题解 大概是神题. 网格图上跑最短路有一个经典的优化方式:分治分组跑最短路. 对于这道题,设矩形长为 \(n\),宽为 \(m\),则对 \( ...
- err:LIBUSB_SUCCESS / LIBUSB_TRANSFER_COMPLE
err:LIBUSB_SUCCESS / LIBUSB_TRANSFER_COMPLE err:LIBUSB_SUCCESS / LIBUSB_TRANSFER_COMPLE err:LIBUSB_S ...
- DebuggerStepThrough特性（c#）
单步调试程序时,有一些属性和方法不想进入,可以使用DebuggerStepThrough特性 (1)属性 private string word; public string Word { [Syst ...
- 第七章 路由 82 名称案例-使用keyup事件实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- anaconda应答文件
一.anaconda和isolinux anaconda是linux安装程序的安装想到,在我们的系统安装光盘内有一个isolinux的目录,这个目录是用来启动光盘镜像的,下面我们说一下这个目录下的文件 ...
- .NET界面开发神器：DevExpress全新发布v19.1.7！快来试用
DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...