fede90's avatar

React new option in select

Hi! i'm new in Vue and i'm having a problem with adding a new option in a select.

this is my blade 's file

<label>Dirección/Descripción 
   <span v-if="showSelect" @click="newOption" class="glyphicon glyphicon-plus" style="color: #2ab27b"></span>
   <span v-if="showNewOption" @click="saveOption" class="glyphicon glyphicon-ok" style="color: #2ab27b"></span>
   <span v-if="showNewOption" @click="removeOption" class="glyphicon glyphicon-remove" style="color: #2ab27b"></span>
</label> 
<select v-if="showSelect" class="form-control" id='direccion-entrega' v-model="direccionEntrega">
    <option v-for="direccion in direccionesEntrega">@{{direccion.direccion}}</option>
</select>
<input v-if="showNewOption" class="form-control" type="text" v-model="direccion">

and this is my vue

saveOption: function(){
   this.direccionEntrega = {id:this.direccionesEntrega.length,direccion:this.direccion}
   this.direccionesEntrega.push(this.direccionEntrega);
   this.showSelect = true;
   this.showNewOption= false;
},

The problem is when I save the new option. My array have the new option but is not selected

You can see an image here: (sorry I don't know how to display it)

https://drive.google.com/file/d/1WJCErEkP4NIuu3MYxGWTkIp-uboFuwYo/view?usp=sharing

Tks!!

0 likes
0 replies

Please or to participate in this conversation.