1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>vue Learn</title>
  6.         <script src="https://unpkg.com/vue/dist/vue.js"></script>
  7.  
  8.     </head>
  9.     <body>
  10.         <form id="form" method="post">
  11.             <login></login>
  12.         </form>
  13.         <script src="./js/vue/v1.js"></script>
  14.     </body>
  15. </html>
  1.  (function(w) {
  2.      Vue.component('login', {
  3.          props: ['uName', 'uPwd'],
  4.          template: '<section class="login">' +
  5.              '<div class="form-group"><label>用户名</label><input id="txtUser" v-model="uName"/></div>' +
  6.              '<div class="form-group"><label>密码</label><input id="txtPwd" type="password" v-model="uPwd"/></div>' +
  7.              '<div class="form-group"><input type="submit" value="提交" v-bind:disabled="btndisable"/></div></section>',
  8.          computed:{
  9.              btndisable:function(){
  10.                  return (this.uName||'').length>0&&(this.uPwd||'').length>0?false:true;
  11.              }
  12.          }
  13.      });
  14.      new Vue({
  15.          el: '#form'
  16.      })
  17.  })(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" 。

修改之后：

  1.  (function(w) {
  2.      Vue.component('login', {
  3.          props: ['uName', 'uPwd'],
  4.          template: '<section class="login">' +
  5.              '<div class="form-group"><label>用户名</label><input id="txtUser" v-model="name"/></div>' +
  6.              '<div class="form-group"><label>密码</label><input id="txtPwd" type="password" v-model="pwd"/></div>' +
  7.              '<div class="form-group"><input type="submit" value="提交" v-bind:disabled="btndisable"/></div></section>',
  8.          data:function(){
  9.              return {
  10.                  name:"",
  11.                  pwd:""
  12.              }
  13.          },
  14.          computed:{
  15.              btndisable:function(){
  16.                  return (this.name||'').length>0&&(this.pwd||'').length>0?false:true;
  17.              }
  18.          }
  19.      });
  20.      new Vue({
  21.          el: '#form'
  22.      })
  23.  })(window)

运行OK,没有警告。

总结：

1.v-model 默认是双向绑定,开始时使用默认 属性uName 双向绑定,意味着存在,组件内部 修改uName,从而影响外部 组件的风险。

2.改正后,在组件内部再构建一套属性域,从而与外界解耦

Vue avoid mutating a prop directly since the value will be overwritten的更多相关文章

  1. [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 ...

  2. 报错：[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 ...

  3. 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 ...

  4. 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 ...

  5. 报错：[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" >< ...

  6. Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

    子组件修改父组件的值踩坑 Vue1.0升级至2.0之后,直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据. 我们都知道在vue中,父组件传入子组件的变量是存放在props属性 ...

  7. Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

    场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...

  8. Vue 错误：Avoid mutating a prop directly

    Avoid mutating a prop directly since the value will be overwritten whenever the parent component re- ...

  9. (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案

    报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component. ...

随机推荐

  1. win10编译maskrcnn benchmark

    步骤 1. 按照官网的Option1安装步骤安装 https://github.com/facebookresearch/maskrcnn-benchmark/blob/master/INSTALL. ...

  2. yocto 编译C程序

    1. 找到编译器位置所在(相关设置参考/opt/poky/1.7/environment-setup-cortexa9hf-vfp-neon-poky-linux-gnueabi文件) poky安装在 ...

  3. 迭代器遍历【List、Set、Map】

    迭代器遍历[List.Set.Map] example package boom.collection; import java.util.ArrayList; import java.util.Ha ...

  4. BLE 5协议栈-逻辑链路控制与适配协议层（L2CAP）

    文章转载自:http://www.sunyouqun.com/2017/04/page/2/ 逻辑链路控制与适配协议通常简称为L2CAP(Logical Link Control and Adapta ...

  5. C# 列表中查找大小比较

    列表中查找大小比较

  6. 微信小程序开发（三）点击事件

    接着上篇博客继续. 如下修改: // index.wxml <view>Hello World!</view> <button bindtap="but&quo ...

  7. RabbitMQ各种交换机类型Exchange Types介绍

    最新版本的RabbitMQ有四种交换机类型,分别是Direct exchange.Fanout exchange.Topic exchange.Headers exchange. 一.Direct E ...

  8. IDEA部署Tomcat报错：No artifacts marked for deployment

    刚开始碰到这个问题还被坑了,搞了好半天...所以我准备记录一下,走的弯路就不说了,因为我没图

  9. top命令参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  10. java中int转成String位数不足前面补零

    java中int转成String位数不足前面补零 转载自:http://ych0108.iteye.com/blog/2174134 java中int转String位数不够前面补零 String.fo ...