解决vue 子组件修改父组件传来的props值报错问题


Posted in Javascript onNovember 09, 2019

vue不推荐直接在子组件中修改父组件传来的props的值,会报错

[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 mutated: "result" (found in component )

<input v-model="currentSearch" type="text" class="input-search" @keydown.enter="doSearch">
export default {
  name:"round-search-bar",
  props:['search'],  //父组件传来的值
  data(){
    return {
      currentSearch: this.search  //通过data, 定义新变量currentSearch, 这样currentSearch的值变更时,不会影响父组件传来的search的值
    }
  },
  methods: {
    doSearch(){
      Util.searchAPI(this.$router,this.currentSearch)
    }
  },
}

以上这篇解决vue 子组件修改父组件传来的props值报错问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
解决vue组件中click事件失效的问题
Nov 09 #Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 #Javascript
Vue根据条件添加click事件的方式
Nov 09 #Javascript
浅谈vuex中store的命名空间
Nov 08 #Javascript
解决$store.getters调用不执行的问题
Nov 08 #Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 #Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 #Javascript
You might like
php cookie使用方法学习笔记分享
2013/11/07 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
初识Node.js
2015/03/20 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
优秀毕业生推荐信
2013/11/02 职场文书
医科大学生的自我评价
2013/12/04 职场文书
加拿大留学自荐信
2014/01/28 职场文书
教育技术职业规划范文
2014/03/04 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
施工安全责任书范本
2014/07/24 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
领导干部失职检讨书
2015/05/05 职场文书
团队拓展训练感想
2015/08/07 职场文书