Comments 3
А не проще ли было поставить фильтр на передаваемые social:
function filterBy(social, type) {
return social.filter( item => item.tags.includes(type))
}
и после
<FooterDesktopOrMobile :lang="lang" :social="filterBy(social, width < 769 ? 'mobile' : 'desctop' )" />
а то копипаста же лютая.
Ну ради публикации можно было бы и причесать кодстайл. Например линтером или линтером с преттиером:
- FooterMobile и FooterDesktop написаны в разном стиле, в одном варианте атрибуты написаны по одному на строку, в другом все в одной строке. Как можно исправить и автомотизировать можно посмотреть тут https://eslint.vuejs.org/rules/max-attributes-per-line.html
- Object.assign(socialMedia) в данном коде вообще бесполезен так как мутирует исходное значение
- Сортировка импортов отсутствует, деструктуризацию vue нужно объединить
Согласен c предыдущими комментаторами, и добавлю:
Убери дублирующий код, как предложил danilovmy, но я бы ещё и
lang
в фильтр закинул:
```javascript
function filterBy(social, tags) {
return social.filter((item) => item.tags.some((tag) => (tag === 'all' || tags.includes(tag))))
}
const filteredSocial = computed(() => filterBy(social, [width < 769 ? 'mobile' : 'desctop' , lang]) )
```
В результат:
```html
<footer-desktop-or-mobile :social="filteredSocial" />
```
И необходимости вdefineAsyncComponent
— нет.Где в теге
nav
ссылки?;Списки лучше сделать с помощью тегов
ul
&li
;Сократи количество div-обёрток, например:
```html
<div class="mr-3"> <navigation-language-select @lang="handleChangeLang" /> </div>
```
переписать на:
```html
<navigation-language-select class="mr-3" @lang="handleChangeLang" />
```
Адаптивный и многоязычный компонент футера для Vue 3: создание и использование