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

Question

[z_u_q]

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

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

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

Answer 1

[grin3671]

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

Comments

[z_u_q]

Огромное спасибо за ответ!