I have to show different dropdowns and in those dropdowns, I have to display dynamic values according to the id coming from the backend response. I have to show that id's value in that dropdown as selected and I have to give the feature of choosing a different value from the same dropdown and then sending it to the backend.

HTML code:

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

Right now I am fetching the value directly from the backend response. But I have to show the value according to the id.

JS code :

export default {
  data(){
      return{
             cityState: { city: '', state: '', status: '',category: '' }

           }
        }
  methods:{
         //After API call :
         this.cityState.status = res.data.data.pincodestatus

}
}

Response from backend:

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

Array from which I have to fetch value and show its text:

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