How to hide non-fitting Vue.js menu items?

Question

Vue.js

I am learning Vue. Wrote a menu script in jQuery. Now I want to rewrite this script in Vue. The menu should always be on one line. If the menu item moves to another line, then the is-hidden class is added. How can I add a method so that a class that doesn't match menu items is added "hidden"? Specifically, it is not clear how to calculate the width of the menu item element and do the calculations that are made in the jQuery script in the menuItems.each(function(i, el) {...});

Link to example (JQuery)

Link to example (Vue)

Answer 1

Start calculations only after the component is added to the page (mounted), otherwise the dimensions of the element will be unknown. Add a variable to calculate the width: in the jQuery example, menuItemsCounter takes on this role. Use this.$refs.menu[index] to calculate the width of each individual element.
Example