@z_u_q

Как скрыть непомещающиеся пункты меню Vue.js?

Изучаю Vue. Написал скрипт меню на jQuery. Теперь хочу переписать этот скрипт на Vue. Меню всегда должно быть на одной строке. Если пункт меню переходит на другую строчку, то добавляется класс is-hidden. Как добавить метод, чтобы класс, который не соответствует элементам меню, добавлялся «скрытым»? Конкретно не понятно, как вычислить ширину элемента пункта меню и сделать вычисления, которые в скрипте с jQuery сделаны в цикле menuItems.each(function(i, el) {...});

Ссылка на пример (JQuery)

Ссылка на пример (Vue)
  • Вопрос задан
  • 148 просмотров
Решения вопроса 1
grin3671
@grin3671
Начинать вычисления только после того, как компонент добавлен на страницу (mounted), иначе размеры элемента будут неизвестны. Добавить переменную для вычисления ширины: в JQuery-примере эту роль выполняет menuItemsCounter. Использовать this.$refs.menu[index] для вычисления ширины каждого отдельного элемента.
Пример
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы