Vue. js общие входные данные по компонентам - PullRequest
Новая
       59

Vue. js общие входные данные по компонентам

1 голос
/ 24 апреля 2020

У меня есть 4 компонента, которые отображают разные данные. В каждом компоненте у меня есть панель навигации, которая содержит входные данные, которые я использую для фильтрации данных в компоненте, например: 

computed: {
  filteredItems() {
    if (this.search !== '') {
      return this.allManufacturers.filter(item => {
        return item.id.toUpperCase().startsWith(this.search.toUpperCase()) === true
      })
    }
    return this.cars.filter(item => {
      return item.id.toUpperCase().startsWith(this.search.toUpperCase()) === true
    })
  },
},

Вычисленное свойство отличается в 4 компонентах. Я хочу переместить панель навигации на компонент и отфильтровать, используя входные данные на панели навигации, а не дублировать код в каждом компоненте

1 Ответ

1 голос
/ 24 апреля 2020

Создайте компонент панели навигации, который будет $emit a search событием, содержащим искомое значение. У него есть только шаблон: 

<template>
  <div>
    <input @input="$emit('search', $event)" />
  </div>
</template>

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

<template>
  <div>
    <navigation @search="newSearch($event.target.value)"></navigation>
    {{ filteredItems }}
  </div>
</template>

data() {
  return {
    search: ''
  }
},
computed: {
  filteredItems () {
    if (this.search !== '') {
      return this.allManufacturers.filter(item => {
        return item.id.toUpperCase().startsWith(this.search.toUpperCase()) === true
      })
    }
    return this.cars.filter(item => {
      return item.id.toUpperCase().startsWith(this.search.toUpperCase()) === true
    })
  },
},
methods: {
  newSearch(text) {
    this.search = text;
  }
}
...