我正在尝试创建一个带有即时搜索输入的导航栏,当您输入搜索内容时,它将直接将您重定向到显示结果的产品列表页面。
现在一切正常,直到我开始单击路由器链接按钮为止。之后,搜索将重定向,但不再更改数据。这是我的代码:
Navigation.vue:
export default {
created() {
},
mounted() {
this.getQuery();
EventBus.$on('search-input', searchInput => {
this.search = searchInput;
});
},
data() {
return {
search: ''
}
},
methods: {
emitSearchInput() {
if (this.$route.path !== "/products") {
this.$router.push('/products');
}
EventBus.$emit('search-input', this.search);
},
}
}
在Navigation.vue中搜索输入:
<input type="search" @keyup="emitSearchInput()" v-model="search" placeholder="Search..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required="">
产品列表页/ Products.vue:
mounted() {
this.getProducts()
EventBus.$on('search-input', searchInput => {
this.data.search = searchInput;
this.getProducts()
});
},
现在,当我在产品列表页面的EventBus中放入alert(searchInput)
时,它会显示正确的搜索输入。它只是不会将其传输到this.data.search
有人可以帮我吗?我在这里做什么错了?