当前位置:网站首页>Resolve the conflict between computed attribute and input blur event
Resolve the conflict between computed attribute and input blur event
2022-04-23 14:40:00 【Feather_ seventy-four】
background : The search box is reused on the home page and search page , The search content of the home page needs to be transferred to the search page and displayed in the search box . The mode of transmission is through this.$router.push
Add query
Field .
<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;
}
}
}
};
problem : stay input The data entered in will disappear when it loses focus
reason : When the page is initialized, it will execute get()
, No longer perform , Every time you enter data, you execute set()
. During the inspection, put the event in the listener blur
Get rid of , That would not have happened . But printed onblur
yes null
, So it can't be removed . So it's the problem of data return .
resolvent :
export default {
data() {
return {
sendSearchInfo: ''
};
},
methods: {
searchPaper(sendSearchInfo) {
this.$router.push({
path: '/search?',
query: {
info: sendSearchInfo
}
});
}
},
computed: {
searchInfo: {
get() {
// because get involves this.sendSearchInfo, So every time set Will trigger get
if (this.sendSearchInfo != '') {
return this.sendSearchInfo;
} else {
return this.$route.query.info;
}
},
set(val) {
this.sendSearchInfo = val;
}
}
}
};
版权声明
本文为[Feather_ seventy-four]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204231435193327.html
边栏推荐
- Find daffodils - for loop practice
- On the insecurity of using scanf in VS
- Swift - Literal,字面量协议,基本数据类型、dictionary/array之间的转换
- 阿里研发三面,面试官一套组合拳让我当场懵逼
- 555 timer + 74 series chip to build eight way responder, 30s countdown, proteus simulation, etc
- ASEMI超快恢复二极管与肖特基二极管可以互换吗
- Proteus simulation design of DC adjustable regulated power supply (with simulation + paper and other data)
- QT actual combat: Yunxi calendar
- 8.3 语言模型与数据集
- DS1302的电子万年历_51单片机,年月日、星期、时分秒、农历和温度,带闹钟,全套资料
猜你喜欢
C语言知识点精细详解——初识C语言【1】——你不能不知的VS2022调试技巧及代码实操【1】
51 Single Chip Microcomputer Design of traffic light system (with Proteus simulation, C program, schematic diagram, PCB, thesis and other complete data)
Proteus simulation design of four storey and eight storey elevator control system, 51 single chip microcomputer, with simulation and keil c code
数组模拟队列进阶版本——环形队列(真正意义上的排队)
Detailed explanation of C language knowledge points -- first knowledge of C language [1]
Qt实战:云曦聊天室篇
本以为能躺着进华为,结果陆续收到京东/滴滴/爱奇艺offer的我迷茫了
Using MATLAB programming to realize the steepest descent method to solve unconstrained optimization problems
A blog allows you to learn how to write markdown on vscode
51 MCU + LCD12864 LCD Tetris game, proteus simulation, ad schematic diagram, code, thesis, etc
随机推荐
一款不错的工具:aardio
Mq-2 and DS18B20 fire temperature smoke alarm system design, 51 single chip microcomputer, with simulation, C code, schematic diagram, PCB, etc
Want to be an architect? Tamping the foundation is the most important
51单片机的花卉、农田自动浇水灌溉系统开发,Proteus仿真,原理图和C代码
【JZ46 把数字翻译成字符串】
全连接层的作用是什么?
1N5408-ASEMI整流二极管1N5408
Qt实战:云曦聊天室篇
Using MATLAB programming to realize the steepest descent method to solve unconstrained optimization problems
51 Single Chip Microcomputer Design of traffic light system (with Proteus simulation, C program, schematic diagram, PCB, thesis and other complete data)
TLC5615 based multi-channel adjustable CNC DC regulated power supply, 51 single chip microcomputer, including proteus simulation and C code
async void 导致程序崩溃
555 timer + 74 series chip to build eight way responder, 30s countdown, proteus simulation, etc
8.2 文本预处理
帧同步 实现
Multisim Simulation Design of DC adjustable regulated power supply of LM317 (with simulation + paper + reference)
ArrayList collection basic usage
qt之.pro文件详解
Qt实战:云曦日历篇
I/O复用的高级应用之一:非阻塞 connect———使用 select 实现(也可以用 poll 实现)