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. ...
随机推荐
- fastadmin 中的日期时间，日期时间范围范围插件和key-value插件
//A/a代表字段名<div class="form-group"> <label class="control-label col-xs-12 col ...
- vlan linux内核数据流程
转:http://blog.sina.com.cn/s/blog_62bbc49c0100fs0n.html 一.前言 前几天做协议划分vlan的时候看了一些linux内核,了解不深,整理了下vlan ...
- 【2017-04-20】Ado.Net与面向对象结合架构中的数据访问层（实体类，数据访问类）
开发项目三层架构:界面层.业务逻辑层.数据访问层 今天学习一下数据访问层,分为实体类和数据访问类 所有的类放在App_Code这个文件夹下边.养成一个好的习惯. 一.实体类 数据库中的表映射为一个类, ...
- 3.LVS的三种工作模式_TUN模式
1.TUN模式(Virtual Server via IP Tunneling) 采用NAT模式时,由于请求和响应的报文必须通过调度器地址重写,当客户请求越来越多时,调度器处理能力将成为瓶颈.为了解决 ...
- USRP B210 更改A通道或B通道
USRP B210 更改A通道或B通道: 默认是A通道进行发射/接收,或设置 Mb0:Subdev Spec: A:A 设置B通道进行发射/接收,设置 Mb0:Subdev Spec: A:B
- 基于Hexo的个人博客搭建(上)
没有废话,直接开始. 1. 环境配置 —1.1 node.js安装 https://nodejs.org/en/download/ 下载最新版本即可,然后无脑安装(除了选安装目录的时候),为了保证安装 ...
- ES head
第2种安装方式 第二种方式就是不通过Elasticsearch插件方式进行安装 1.下载elasticsearch-head的源码包 地址:https://github.com/mobz/elasti ...
- VMware 虚拟机下载与安装
虚拟机下载 VMware官网地址:https://www.vmware.com/ 进行官网后,点击左边的下载图标,然后 根据操作系统选择合适的产品,在这里以Windows系统为例,点击转至下载,如下图 ...
- C++ vector 实例二
// constructing vectors #include <iostream> #include <vector> int main () { // construct ...
- shareSDK集成遇到的问题汇总
问题一.平台添加应用时需要输入的签名(下图)的获取方式 第一步.通过android studio生成签名保存在本地 第二步.查看签名的信息 问题二.由于同事集成了QQ登录和微信登录,后来又需要加入微博 ...