背景:搜索框在首页和搜索页复用,需要将首页的搜索内容传到搜索页并显示在搜索框内。传送方式是通过在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;
}
}
}
};