У меня есть родительский компонент, который 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;
}
}
Я не знаю, что / как отфильтрованные игры должны быть структурированы так, чтобы они обновлялись, когда срабатывает событие «механизм-фильтр-изменение». Делать это вычисляемым винтом имеет больше смысла, чем метод, но я не знаю, как сказать вычисляемому винту, что неактивные механизмы изменились.
Спасибо