解决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 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
javascript常用函数(2)
Nov 05 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
解决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截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
简单谈谈favicon
2015/06/10 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
体育学院毕业生自荐信
2013/11/03 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
出国导师推荐信
2015/03/25 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书