Как я могу отфильтровать массив в родительском компоненте из фильтра в дочернем компоненте - PullRequest
0 голосов
/ 01 июня 2019

У меня есть родительский компонент, который v-for над массивом объектов. У меня есть дочерний компонент, который отображает список возможных фильтров для фильтрации родительского списка. Я использую event bus для отправки сообщения, когда фильтр выбран. Я просто не могу собрать кусочки вместе. Мне нравится идея вычисляемого свойства, но как это узнать, когда фильтр изменился и должен повторить v-for Я попробовал метод, но не могу заставить его работать.

Как отфильтровать данные из родительского компонента в дочернем компоненте? кажется близким к тому, что я хочу сделать, но без твердого примера того, как заставить его работать, я не вижу как собрать это вместе.

дочерний компонент:

export default {
  name: "mechanisms",
  props: ['games'],
  data() {
    return {
      inactiveMechanisms: []
    }
  },
  methods: {
    toggleActive(mechanism) {
      const idx = this.inactiveMechanisms.indexOf(mechanism);
      idx !== -1 ? this.inactiveMechanisms.splice(idx, 1) : this.inactiveMechanisms.push(mechanism);
      this.emitFilterClick();
    },
    emitFilterClick() {
      EventBus.$emit('mechanism-filter-change', this.inactiveMechanisms);
    }
  },
  computed: {
    allMechanisms() {
      const mechanisms = this.games.reduce((acc, game) => {
        game.mechanics.forEach((mechanism) => {
          acc.push(mechanism);
        });
        return acc;
      }, [])
      const uniqeMechanisms = Array.from(new Set(mechanisms).values()).sort();
      this.inactiveMechanisms = [];
      return uniqeMechanisms;
    }
  },
}
</script>

Родитель:

<mechanisms-filter v-bind:games="sortedGames" />
<div class="games" 
    v-bind:key=game.bggId v-for="game in filteredGames">
</div>

computed: {
    sortedGames() {
      return showBestAtFirst(this.userNames.length, [...this.games].sort(compareGameNames));
    },
    filteredGames() {
      return this.sortedGames;
    },
    showFilters() {
      return this.inactiveMechanisms;
    }
  }

Я не знаю, что / как отфильтрованные игры должны быть структурированы так, чтобы они обновлялись, когда срабатывает событие «механизм-фильтр-изменение». Делать это вычисляемым винтом имеет больше смысла, чем метод, но я не знаю, как сказать вычисляемому винту, что неактивные механизмы изменились.

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...