Многозначный компонент для VueJS

#vuejs3

Вопрос:

В настоящее время я использую «Компонент множественного выбора» из jQuery. Я только что узнал, что есть версия Vue, но она добавляет зависимость к Jquery, которая мне не нравится.

https://multiple-select.wenzhixin.net.cn/docs/en/introduction

Есть ли собственный способ сделать это с помощью VueJS 3.0 или какой-либо лучшей замены?

Это то, чего я собираюсь достичь:

введите описание изображения здесь

Ответ №1:

Да, вы можете либо создать новый компонент для выпадающего списка/флажков, либо использовать аналогичный компонент из Vuetify: https://vuetifyjs.com/en/components/selects/#menu-props

Для нового компонента вы можете использовать что-то вроде этого:

 <div class="select">
  <ul>
    <li v-for="(option, index) in options" :key="index">
      <input type="checkbox" :id="index" :value="option.value" v-model="selected">
      <label :for="index">{{ option.anything }}</label>
    </li>
  </ul>
</div>
 

Вот кодовое имя, я не владею кодом.
https://codepen.io/huleos/pen/xQaYdK