当前位置:网站首页>解决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
边栏推荐
猜你喜欢
【工厂模式详解】工厂方法模式
DVWA之暴力破解(Brute Force)Low-->high
QT actual combat: Yunxi calendar
循环队列的基本操作,你学会了吗?
Electronic scale weighing system design, hx711 pressure sensor, 51 single chip microcomputer (proteus simulation, C program, schematic diagram, thesis and other complete data)
8.4 循环神经网络从零实现
外包干了四年,废了...
Ali developed three sides, and the interviewer's set of combined punches made me confused on the spot
PCIe X1 插槽的主要用途是什么?
L'externalisation a duré quatre ans.
随机推荐
MQ-2和DS18B20的火灾温度-烟雾报警系统设计,51单片机,附仿真、C代码、原理图和PCB等
QT interface optimization: double click effect
LLVM - 生成加法
想要成为架构师?夯实基础最重要
AT89C52单片机的频率计(1HZ~20MHZ)设计,LCD1602显示,含仿真、原理图、PCB与代码等
L'externalisation a duré quatre ans.
51 MCU + LCD12864 LCD Tetris game, proteus simulation, ad schematic diagram, code, thesis, etc
Mq-2 and DS18B20 fire temperature smoke alarm system design, 51 single chip microcomputer, with simulation, C code, schematic diagram, PCB, etc
Redis源码分析之PSYNC同步
redis的五种数据类型
Swift Protocol 关联对象 资源名称管理 多线程GCD 延迟 once
555 timer + 74 series chip to build eight way responder, 30s countdown, proteus simulation, etc
【JZ46 把数字翻译成字符串】
JumpServer
初始c语言大致框架适合复习和初步认识
Sed learning for application
外包幹了四年,廢了...
一篇博客让你学会在vscode上编写markdown
Swift - Literal,字面量协议,基本数据类型、dictionary/array之间的转换
QT actual combat: Yunxi calendar