解决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中Array 对象相关的几个方法
Dec 22 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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
用PHP4访问Oracle815
2006/10/09 PHP
PHP 高级课程笔记 面向对象
2009/06/21 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python基础教程之常用运算符
2014/08/29 Python
python实现ipsec开权限实例
2014/11/11 Python
全面分析Python的优点和缺点
2018/02/07 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python3 元组tuple入门基础
2020/02/09 Python
python基于socket函数实现端口扫描
2020/05/28 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
员工评语大全
2014/01/19 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
上班离岗检讨书
2014/09/10 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers