Insert Input value as a Select Option

Question

Good night! I’m a beginner with Vue.js, I was trying to do some tests and small projects to train and decided to make a program that simulates a Clock Point. Anyway, I ended up locking this part of the code (right at the beginning --'), where I want to take the value of Input and insert it as an Option of a Select, where later I will add a button to mark the Checkin/Checkout of the selected employee.

Follows the code:

<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>

The problems:

1 - In the Select tag, when inserting a new value, a blank value comes out before each name inserted;

2 - Is it "right" or good practice to use this v-for in the option tag? I wondered if it would not be in the Select tag;

3 - When I use Option without v-for, it only shows the name that was entered at the time of Input, but when I test an "Alert(array)" to show the contents of the Array, all inserted names are shown, only not shown in Select. e_and

Can someone shed some light? I already read the documentation (https://br.vuejs.org/v2/guide/forms.html), I didn’t find anything like this. :/

Thank you for your attention

Answer 1

I’ll focus on the part of adding an item to the list so that your select is updated with the new value, that is, its list that loads the select from the moment of its update automatically the options are also, minimal example:

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>

in this example, when you type in the text box some value and press the select will be updated with the new value, actually the list created with the name of items is updated and consequently select. Note: was added in select one size = "10" to improve the visualization.

1 - In the Select tag, when inserting a new value, a blank value comes out before each name inserted;

You did wrong, there is reactive programming like this, there is always a variable that updates the components, it is not a general rule, but, this is how it is done in its majority and it is also the famous one depends on its context, in this current one it should be made equal in the example above.

2 - It is "right" or good practice to use this v-for in tag option? I was wondering if it wouldn’t be at tag Select.

Actually there’s no such thing as good practice it’s just that it has to be done look at an example here on the site itself

3 - When I use the option without v-for, it only shows the name that was entered at the time of the input, but when I test one alert(array) to show the contents of array, all inserted names are shown, only not shown in the Select.

In that question I was in doubt and also seems to me that did wrong, as I said and I always repeat in the reactive programming we work with the variables because this is how it should be done and with these variables has the values we need.

---

Study more, watch some videos and tutorials, here you have plenty of material and do not use commands javascript pure (except for this too) always use what the lib vuejs recommends you.