解决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与C# Windows应用程序交互方法
Jun 29 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
vue实现div单选多选功能
Jul 16 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
质检的岗位职责
2013/11/17 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
献爱心活动总结
2014/05/07 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle