Как реализуешь во Vue.js несколько dropdown с одинаковой логикой и разными элементами в выпадающем списке

Да ты посмотри, какой у нас тут примерчик подъехал, блядь! Смотри, как они Composition API используют, хитрожопые. Ну, в принципе, логично, а то миксины — это пиздец, иногда, мутная тема, можно так намешать, что потом сам чёрт ногу сломит.

Вот, смотри, что они делают, эти умники. Берут функцию useDropdown, сука, как фабрику. Туда items закидывают — ну, массив, что будем показывать в выпадашке. А она тебе, зараза, возвращает целый набор: isOpen — открыто или нет, toggle — функция переключения, и сами items, которые ты передал. Удобно, ёпта!

А потом, внимание, ебаный гений! Объявляют два массива: fruits и colors. И теперь, представляешь, можно наделать кучу таких выпадающих списков, и у каждого будет своё, блядь, независимое состояние! Не то что в Options API, где порой мозги вытекают, пытаясь состояние разделить.

Шаблон, в целом, простой, как три копейки. Кнопка, по клику на которую вызывается toggle. И список, который рендерится, только если isOpen — правда. И всё это, сука, закольцовывается через v-for по нашим items.

Альтернативу они упомянули — слоты. Это тоже мощный инструмент, если надо не просто список строк вывалить, а какую-то свою, ебучую, развесистую вёрстку внутрь засунуть. Но тут уже решай сам, что тебе больше подходит: простота или гибкость, блядь.

Короче, идея ясна? Берешь эту логику, оборачиваешь в компонент, и плодишь их, как сумасшедший, на всю страницу. Главное — не запутайся, а то опять будешь сидеть и думать: "Ну и нахуя я это сделал?".