Boa noite! Sou iniciante com o Vue.js, estava tentando fazer alguns testes e pequenos projetos para treinar e resolvi fazer um programa que simule um Relógio Ponto. Enfim, acabei travando nessa parte do código(logo no início --'), onde quero pegar o valor do Input e inserí-lo como uma Option de um Select, onde posteriormente vou acrescentar um button pra marcar o CheckIn/CheckOut do funcionário selecionado.
Segue o código:
<template>
<div class="container">
<div class="theButtons">
<!-- This button shows the input -->
<button @click="toggleButton1 = !toggleButton1" class="btn btn-danger" type="button">New Collab</button>
<!-- This button show the select -->
<button @click="toggleButton2 = !toggleButton2" class="btn btn-danger" type="button">Collabs</button>
</div>
<!-- This form insert the name -->
<form v-show="toggleButton1" class="newCollabForm">
<div class="form-group">
<label>Employee</label>
<input type="text" class="form-control" placeholder="Collab Name" id="collabName">
<!-- This button submit a new collab name -->
<button @click="submitCollab" class="btn btn-dark" type="submit">Submit</button>
</div>
</form>
<!-- This form show the names -->
<form v-show="toggleButton2" class="newCollabForm">
<div class="form-group">
<label for="namesSelect">Search Employee</label>
<select class="form-control" id="namesSelect">
<!-- <option selected> -- </option> -->
<option v-for="collab in collabNames" v-bind:key="collab.value" />
</select>
</div>
</form>
</div>
</template>
<script>
export default {
name: "ButtonsAndForm",
data() {
return {
collabNames: [],
toggleButton1: false,
toggleButton2: false
}
},
methods: {
submitCollab() {
let newCollabName = document.querySelector("#collabName");
let option = document.querySelector("option");
let selectMenu = document.querySelector("#namesSelect").value;
this.collabNames.push(newCollabName.value);
option.innerHTML = newCollabName.value;
selectMenu.appendChild(option);
alert(this.newCollabName);
}
}
}
</script>
Os problemas:
1 - Na tag Select, ao inserir um novo valor, acaba saindo um valor em branco antes de cada nome inserido;
2 - É "correto" ou boa prática usar esse v-for na tag option? Fiquei na dúvida se não seria na tag Select;
3 - Quando eu uso a Option sem o v-for, ele só mostra o nome que foi inserido no momento do Input, mas quando eu testo um "alert(array)" pra mostrar o conteúdo da Array, todos os nomes inseridos são mostrados, só nao aparece no Select. e_e
Alguem pode dar uma luz? Já dei uma lida na documentação (https://br.vuejs.org/v2/guide/forms.html), não achei nada parecido com isso. :/
Agradeço a atenção desde já