MULTISELECT VUE.JS

Precisei de um código multselect simples em vue.js e não encontrava, então resolvi desenvolver este, onde a unica biblioteca importada foi a do VUE.JS. Veja o exemplo abaixo.

NO HTML

 

<div id="app">

    <select @change="selecionarOpcaoComboGraduacao($event)" id="graduacao">

        <option value="">--Selecione a graduação--</option>

        <option v-for="(v,index) in listaGraduacao" :value="v.id">{{v.nome}}</option>

    </select>

    <br />

 <div v-if="opcaoSelecionadaComboGraduacao.length>0">

 <table>

  <tr v-for="(v, indice) in opcaoSelecionadaComboGraduacao">

     <td >

      <input type="hidden" name="opcaoSelecionadaComboGraduacao[]" :value="v.id" />

       {{v.nome}}

     </td>

     <td> <span @click="removerOpcaoSelecionadaComboGraduacao(indice)">

                <button title="remover">X</button> </span></td>

   </tr>

  </table>

 </div>

</div>

NO JAVASCRIPT 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { graduacao: '', listaGraduacao: [], opcaoSelecionadaComboGraduacao: [], }, created() { this.carregarGraduacaoEstatica(); //this.carregarGraduacaoDinamica(); }, methods: { carregarGraduacaoEstatica(){ this.listaGraduacao = [ {id: 1, nome: "ENGENHARIA"}, {id: 2, nome: "DIREITO"}, {id: 3, nome: "TECNOLOGIA"}, {id: 4, nome: "REDES"}, {id: 4, nome: "ADMINISTRAÇÃO"}, ] }, carregarGraduacaoDinamica(){ fetch('consulta-graduacao.php') .then(response => response.json()) .then(response => { this.listaGraduacao = response; })}, selecionarOpcaoComboGraduacao(e) { const indice = document.querySelector("#graduacao").selectedIndex; this.opcaoSelecionadaComboGraduacao.push({ id: e.target.value, nome: document.querySelector("#graduacao").options[indice].text }); }, removerOpcaoSelecionadaComboGraduacao(indice) { this.opcaoSelecionadaComboGraduacao.splice(indice, 1); }, } }) </script>

Se este Código do Dia lhe ajudou ou tiver qualquer dúvida ou encontrar algum erro deixe seu comentário que irei responder assim que possível. 

Obrigado pela visita.

 VAAALEU 😎👍