Как правильно сделать компонент поиска на Vuе?

Question

[lookingfor2]

На данный момент у меня есть метод поиска в компоненте

В templatesList у меня хранится список пользователей
data() {
    return {
      templatesList: this.$store.getters.templatesList,
    };
  },
//метод поиска
search(searchValue) {
      if (searchValue.length > 0) {
        this.templatesList = this.templatesList.filter(item => item.name.indexOf(this.searchValue) !== -1);
      } else {
        this.templatesList = this.$store.getters.templatesList;
      }
      return this.templatesList;
    },

Но поиск будет использоваться и в другом компоненте, в data там будет другой массив с данными. Как сделать поиск универсальным компонентом ?

Answer 1

[Алексей Ярков]

Передавать массив пропсом

Comments

[VegasChickiChicki]

Алексей Ярков Вопрос. Насколько правильно\неправильно автор поступил, когда сначала данные взял через геттер и поместил в data объект, а потом в методе их начал мутировать? Я чего то не понимаю или логичнее было бы сделать computed свойство с геттером(геттер) и сеттером(мутацией)?

[Алексей Ярков]

VegasChickiChicki, вполне достаточно такого:

computed: {
  templateList() {
    return this.$store.getters.templatesList.filter(template => template.name.toLowerCase().includes(this.searchValue.toLowerCase()))
  }
}

При изменении searchValue будет перерисовываться templateList.

[lookingfor2]

Алексей Ярков, я сделал поиск компонентом, но сам список у меня рисуется в родительском компоненте, как мне передать туда templatesList?

[Алексей Ярков]

lookingfor2, мне угадать и сгенерировать код? Сделайте демку в песочнице для наглядности и поговорим предметно ))

[lookingfor2]

Алексей Ярков, я разобрался спасибо большое