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.
<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>
<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 😎👍
