带有路由器推功能的Vue.JS EventBus仅工作一次

时间:2018-08-29 12:46:25

标签: vue.js event-bus emit

我正在尝试创建一个带有即时搜索输入的导航栏,当您输入搜索内容时,它将直接将您重定向到显示结果的产品列表页面。

现在一切正常,直到我开始单击路由器链接按钮为止。之后,搜索将重定向,但不再更改数据。这是我的代码:

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

有人可以帮我吗?我在这里做什么错了?

0 个答案:

没有答案