解决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实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
JS中如何优雅的使用async await详解
Oct 05 Javascript
解决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
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php实现的验证码文件类实例
2015/06/18 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
Vue渲染函数详解
2017/09/15 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
使用python实现kNN分类算法
2019/10/16 Python
学习Python需要哪些工具
2020/09/04 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
感恩节活动策划方案
2014/05/16 职场文书
债务授权委托书范本
2014/10/17 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
大学生见习报告总结
2014/11/04 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS