解决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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
node.js实现端口转发
Apr 14 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
基于JavaScript实现控制下拉列表
May 08 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
读群众路线心得体会
2014/03/07 职场文书
敬老院活动总结
2014/04/28 职场文书
新教师岗前培训方案
2014/06/05 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
英语通知范文
2015/04/22 职场文书
不同意离婚上诉状
2015/05/23 职场文书
房贷收入证明范本
2015/06/12 职场文书
2016年母亲节广告语
2016/01/28 职场文书
《称赞》教学反思
2016/02/17 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript