Search
Write a publication
Pull to refresh

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" />
    ```

Sign up to leave a comment.

Articles