Vue.JS EventBus с роутер-пушем работает только один раз - PullRequest
Новая
       14

Vue.JS EventBus с роутер-пушем работает только один раз

0 голосов
/ 29 августа 2018

Я пытаюсь создать панель навигации с мгновенным поисковым вводом, также, когда вы вводите поиск, он перенаправляет вас прямо на страницу со списком продуктов, отображающую результаты.

Теперь все работает отлично, пока я не начну нажимать на кнопки маршрутизатора. После этого поиск будет перенаправлен, но больше не изменяет данные. Вот мой код:

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()
    });
},

Теперь, когда я помещаю alert(searchInput) внутри EventBus на странице с перечнем продуктов, он отображает правильный поисковый ввод. Это только не передает его на this.data.search

Кто-нибудь может мне помочь? Что я здесь не так делаю?

...