Что я пытаюсь сделать: у меня есть несколько фильтров, которые отображаются на странице для фильтрации продуктов, которые отображаются на странице.В мобильном устройстве я хочу скрыть эти фильтры за кнопкой, которая после нажатия на них покажет фильтры в выдвижном меню сбоку.
Хотя я могу дублировать одни и те же компоненты на странице дважды, компонентыэто не тот же самый экземпляр, то есть нажатие на фильтр вызовет эту функцию для фильтрации продуктов на странице, но оно устанавливает свои собственные атрибуты данных, которые я использую, чтобы сказать «если атрибут данных« выбран »является истинным,добавить «выбранный» класс к компоненту. Когда я изменяю размер окна, другой экземпляр компонента не имеет «выбранного» атрибута данных, помеченного как «истинный».
Я ожидаю этого, потому что изthe docs:
Обратите внимание, что при нажатии на кнопки каждая ведет свой отдельный подсчет, потому что каждый раз, когда вы используете компонент, создается его новый экземпляр.
... но как лучше всего это сделать?
Я поиграл с идеей просто установить класс 'mobile' на компонентent, и .mobile css будет стилизовать компоненты по-разному, но мне нужно, чтобы он вырвался туда, где он вложен.
например
<body>
<header>
<!-- desktop -->
<guitar-filters>
<header>
<!-- mobile -->
<guitar-filters>
</body
Вот мой компонент Vue 'гитара-«Фильтры», который отображает несколько компонентов, называемых «инструмент-фильтр»:
Vue.component('guitar-filters', {
data: function() {
return {
isMobile: false
}
},
mounted: function() {
var comp = this;
this.setIsMobile();
window.addEventListener('resize', function() {
comp.setIsMobile();
});
},
methods: {
setIsMobile: function() {
this.isMobile = (window.innerWidth <= 900) ? true : false;
}
},
template: `
<ul class="filters" :class="{mobile: isMobile}">
<li>
All
</il>
<li>
Series
<ul>
<instrument-filter filter-by="series" filter="All">All</instrument-filter>
<instrument-filter filter-by="series" filter="Frontier">Frontier</instrument-filter>
<instrument-filter filter-by="series" filter="Legacy">Legacy</instrument-filter>
<instrument-filter filter-by="series" filter="USA">USA</instrument-filter>
</ul>
</li>
<li>
Body Shape
<ul>
<instrument-filter filter-by="bodyType" filter="All">All</instrument-filter>
<instrument-filter filter-by="bodyType" filter="Concert">Concert</instrument-filter>
<instrument-filter filter-by="bodyType" filter="Concertina">Concertina</instrument-filter>
<instrument-filter filter-by="bodyType" filter="Concerto">Concerto</instrument-filter>
<instrument-filter filter-by="bodyType" filter="Orchestra">Orchestra</instrument-filter>
</ul>
</li>
</ul>
`
});
Компонент «фильтр-инструмент»:
Vue.component('instrument-filter', {
data: function() {
return {
selected: false
}
},
props : [
'filterBy',
'filter'
],
methods: {
addFilter: function() {
this.$root.$emit('addFilter',{filterBy: this.filterBy,filter: this.filter});
},
clearFilter: function() {
this.$root.$emit('clearFilter',{filterBy: this.filterBy,filter: this.filter});
}
},
template: `
<li :class="{ 'selected' : selected }" @click="selected = !selected; selected ? addFilter() : clearFilter()"><slot></slot></li>
`
});
.css:
ul.filters > li > ul > li.selected::before {
content: "✔️";
...
}
цель состоит в том, чтобы фильтр имел класс selected в обоих случаях.Если я нажму на «фигуру концерта», а затем изменит размер окна на мобильную точку останова, будет выбран и другой экземпляр этого компонента фильтра.
РЕДАКТИРОВАТЬ: я мог бы взломать это.Я мог бы переместить один экземпляр компонента с помощью javascript, но я изучаю Vue и хочу сделать это способом Vue и лучшими практиками.