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. ...
随机推荐
- 读书笔记《Oracle从入门到精通》
目录 一.SQL基础 1.SQL种类 2.常用数据类型 3.DDL 4.约束 5.DML语句 二.SELECT语句 1.结果集'*'与指定列 2.拼接符 || 3.substr函数 4.instr函数 ...
- 4G LTE 网只能提供数据服务，不能承载语音通话，该怎么理解？
转:http://www.qbiao.com/16776.html 这个问题要从移动核心网的角度来理解.我们平时说的WCDMA.TD-SCDMA.TD-LTE其实通常指空口技术,即从手机到基站的通信技 ...
- zookeeper--为分布式应用提供协调服务
1.概述 zookeeper是一个开源的.分布式的.为分布式应用提供协调服务的Apache项目 zookeeper的工作机制 zookeeper从设计模式角度来理解:是一个基于观察者模式设计的分布式服 ...
- servlet遇到的问题
1 创建web项目没有xml自动生成 2 servlet 忽然报奇怪500错误 出现的BUG原因 JAVA bean没有设置 自动导入了其他User包
- Hadoop_07_HDFS的Java API 操作
通过Java API来访问HDFS 1.Windows上配置环境变量 解压Hadoop,然后把Hadoop的根目录配置到HADOOP_HOME环境变量里面 然后把HADOOP_HOME/lib和HAD ...
- BZOJ 1008 组合数学
监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 总的情况为mn不越狱的情况为 ...
- jpa @Query()参数设置，:冒号方式、？NO.问号方式、实体类对象参数设置
一.service层事务(update/delete) @Transactional(rollbackFor = Exception.class) 二.@Query()参数设置 ?x 和:XX不能混 ...
- linux 命令格式和帮助
命令的格式: command [options] [arguments] command:命令 options: --单词全称 或 -单字简称 如: ls --all 等于 ls - ...
- Linux下DB2指令总结
1.显示当前实例 >> get instance The current database manager instance is: db2axing 2.列出当前实例中激活的数据库 &g ...
- 为什么重写equals()方法就必须重写hashCode()方法
hashCode()和equals()保持一致,如果equals方法返回true,那么两个对象的hasCode()返回值必须一样.如果equals方法返回false,hashcode可以不一样,但是这 ...