Tengo que mostrar diferentes menús desplegables y en esos menús desplegables, tengo que mostrar valores dinámicos de acuerdo con la identificación que proviene de la respuesta del servidor. Tengo que mostrar el valor de esa identificación en ese menú desplegable como seleccionado y tengo que dar la función de elegir un valor diferente del mismo menú desplegable y luego enviarlo al backend.

Código HTML:

 <div class="col-md-3"> <label>Status: </label> <b-input-group left="<i class='fa fa-location-arrow'></i>"> <select v-model = "Status"> <option selected>{{cityState.status}}</option> <option v-for="item in StatusArray" :value="item">{{item.text}}</option> </select> </b-input-group> </div>

En este momento, estoy obteniendo el valor directamente de la respuesta del servidor. Pero tengo que mostrar el valor de acuerdo con la identificación.

Código JS:

 export default { data(){ return{ cityState: { city: '', state: '', status: '',category: '' } } } methods:{ //After API call : this.cityState.status = res.data.data.pincodestatus } }

Respuesta del back-end:

 "data": { "pincodestatus": "Active", }

Matriz de la que tengo que obtener valor y mostrar su texto:

 StatusArray: [ { value: "Active", text: "Active" }, { value: "Embargo", text: "Embargo"}, { value: "De-Active", text: "De-Active" }, { value: "Essentials_Only", text: "Essentials Only" } ],