解决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 相关文章推荐
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
RequireJS使用注意细节
May 15 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
vue-cli中的webpack配置详解
Sep 25 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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实现的json类实例
2015/07/28 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
javascript闭包的理解
2015/04/01 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
socket + select 完成伪并发操作的实例
2017/08/15 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python坐标线性插值应用实现
2019/11/13 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
老师自我鉴定范文
2013/12/25 职场文书
现货白银电话营销话术
2015/05/29 职场文书
运动员代表致辞
2015/07/29 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
九年级历史教学反思
2016/02/19 职场文书
财务年终工作总结大全
2019/06/20 职场文书