当前位置:网站首页>解决computed属性与input的blur事件冲突问题
解决computed属性与input的blur事件冲突问题
2022-04-23 14:35:00 【Feather_74】
背景:搜索框在首页和搜索页复用,需要将首页的搜索内容传到搜索页并显示在搜索框内。传送方式是通过在this.$router.push
方法中加query
字段。
<template>
<div class="index-container">
<a-input-search class="input-shape" v-model="searchInfo" placeholder="Search" @search="searchPaper(sendSearchInfo)" size="large" />
</div>
</template>
export default {
data() {
return {
sendSearchInfo: ''
};
},
methods: {
searchPaper(sendSearchInfo) {
this.$router.push({
path: '/search?',
query: {
info: sendSearchInfo
}
});
}
},
computed: {
searchInfo: {
get() {
return this.$route.query.info;
},
set(val) {
this.sendSearchInfo = val;
}
}
}
};
问题:在input中输入的数据在失去焦点时会消失
原因:页面初始化的时候会执行get()
,之后都不再执行,每次输入数据都会执行set()
。在检查中把事件监听器中的blur
去掉,就不会出现上述问题。但是打印了onblur
是null
,所以无法去掉。所以是数据返回的问题。
解决方法:
export default {
data() {
return {
sendSearchInfo: ''
};
},
methods: {
searchPaper(sendSearchInfo) {
this.$router.push({
path: '/search?',
query: {
info: sendSearchInfo
}
});
}
},
computed: {
searchInfo: {
get() {
// 因为get涉及到this.sendSearchInfo,所以每次set都会触发get
if (this.sendSearchInfo != '') {
return this.sendSearchInfo;
} else {
return this.$route.query.info;
}
},
set(val) {
this.sendSearchInfo = val;
}
}
}
};
版权声明
本文为[Feather_74]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_44997147/article/details/124204803
边栏推荐
- 成都控制板设计提供_算是详细了_单片机程序头文件的定义、编写及引用介绍
- Ali developed three sides, and the interviewer's set of combined punches made me confused on the spot
- Electronic scale weighing system design, hx711 pressure sensor, 51 single chip microcomputer (proteus simulation, C program, schematic diagram, thesis and other complete data)
- 51单片机的花卉、农田自动浇水灌溉系统开发,Proteus仿真,原理图和C代码
- [servlet] detailed explanation of servlet (use + principle)
- 查找水仙花数-for循环实践
- PCIe X1 插槽的主要用途是什么?
- kprobe 的 3 种使用
- 循环队列的基本操作(实验)
- 一个月把字节,腾讯,阿里都面了,写点面经总结……
猜你喜欢
随机推荐
c语言在结构体传参时参数压栈问题
Use of ansible and common modules
Swift - Literal,字面量协议,基本数据类型、dictionary/array之间的转换
flannel 原理 之 TUN模式
【NLP】HMM隐马尔可夫+维特比分词
8.3 语言模型与数据集
直流可调稳压电源的Proteus仿真设计(附仿真+论文等资料)
C语言知识点精细详解——初识C语言【1】
51单片机的直流电机PWM调速控制系统(附Proteus仿真+C程序等全套资料)
flannel 原理 之 子网划分
C语言知识点精细详解——数据类型和变量【1】——进位计数制
API Gateway/API 网关(四) - Kong的使用 - 集成Jwt和熔断插件
数组模拟队列进阶版本——环形队列(真正意义上的排队)
Outsourcing for four years, abandoned
一款不错的工具:aardio
金九银十,入职字节跳动那一天,我哭了(蘑菇街被裁,奋战7个月拿下offer)
OpenFaaS实战之四:模板操作(template)
8.5 循环神经网络简洁实现
vscode中文插件不生效问题解决
1N5408-ASEMI整流二极管1N5408