0

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á

1
  • Se fez a parte do código tudo errado
    – novic
    Commented 27/02/2020 às 2:01

1 Resposta 1

2

Vou me focar na parte de adicionar um item na lista para que o seu select seja atualizado com o novo valor, ou seja, a sua lista que carrega o select a partir do momento da sua atualização automaticamente os options também são, exemplo minimo:

var vm = new Vue({
  el: '#app',
  data: {
    value: '',
    items: []
  },
  methods: {
    handleAddItem: function() {
      if (this.value.trim()){
        this.items = [...this.items, this.value];
        this.value = '';
      } else {
        alert('Digite algum valor');        
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js"></script>
<div id="app">
  <div>
      <p>
        <input type="text" v-model="value" />
        <button v-on:click="handleAddItem">Add Item</button>
      </p>
      <select size="5" style="width:100%">
        <option 
          v-for="(item,index) in items" 
          v-bind:key="index">{{item}}</option>
        </select>
      </ul>
    </div>
</div>

nesse exemplo, quando você digitar na caixa de texto algum valor e pressionar o botão o select vai ser atualizado com o novo valor, na verdade a lista criado com o nome de items é que é atualizado e consequentemente o select. Observação: foi adicionado no select um size = "10" para melhore a visualização.

1 - Na tag Select, ao inserir um novo valor, acaba saindo um valor em branco antes de cada nome inserido;

Você fez errado, não se faz programação reativa assim, sempre tem uma variável que atualiza os componentes, não é regra geral, mas, é assim que é feito em sua maioria e também é o famoso depende do seu contexto, nesse atual deve ser feito igual no exemplo acima.

2 - É "correto" ou boa prática usar esse v-for na tag option? Fiquei na dúvida se não seria na tag Select.

Na verdade não tem essa de boa prática é assim mesmo que tem que ser feito olhe um exemplo aqui no próprio site

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ó não aparece no Select.

Nesse pergunta fiquei na duvida e também me parece que fez errado, como eu disse e repito sempre na programação reativa trabalhamos com as variáveis porque é assim que deve ser feito e com nessas variáveis tem os valores que necessitamos.


Estude mais, assista alguns videos e tutoriais, aqui mesmo tem bastante material e não use comandos do javascript puro (tem exceção para isso também) use sempre o que a lib vuejs te recomenda.

1
  • Muito obrigado!!
    – r. duarte
    Commented 27/02/2020 às 8:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .