how to get value in selected dropdown in VUE

Question

i have my code

HTML

<div v-for="(edu, index) in fetch" :key="edu.id">
    <v-col cols="2">
        <v-btn
          class="mr-3" @click="handleEdit(edu, index)">
        </v-btn>
    </v-col>
    <v-col cols="12" sm="6" md="6">
        <v-select
          :items="item_bulan"
          v-model="add_graduate_month"
          item-value="id"
          item-text="name"
          label="month"
          dense
        ></v-select>
       <p>Selected ID: {{ add_graduate_month }}</p>
    </v-col>
</div>

here I edit the data in the dropdown

an this fuction

export default {
      name: "Education",
      data: function() {
        return {
          item_bulan: [
              {id:'1', name:"Jan"},
              {id:'2', name:"Feb"},
              {id:'3', name:"Mar"},
              {id:'4', name:"Apr"},
              {id:'5', name:"Mei"},
              {id:'6', name:"June"},
              {id:'7', name:"Jul"},
              {id:'8', name:"Ags"},
              {id:'9', name:"Sep"},
              {id:'10', name:"Okt"},
              {id:'11', name:"Nov"},
              {id:'12', name:"Des"},
            ],
          add_graduate_month: null,
        };
      },
 computed: {
   fetch() {
     return this.$store.state.education;
    },
  },
   methods:{
    handleEdit(edu, index) {
      alert(edu.graduate_month)
      this.add_graduate_month = edu.graduate_month;
    },
}

I created a dropdown containing the month's value data, namely the id. here I managed to get the value from the database which contains the value "1" but when I edit, the value doesn't appear in the dropdown, when using v-text, this value is displayed, how to get the value into v-select?

how could this happen?

image

Answer 1

When you are assigning a value to the add_graduate_month which is attached to the v-select, then the value of add_graduate_month should match with one of the values from the item_bulan.

So, if you are getting 1 from the database then your add_graduate_month value should be {id:'01', name:"Jan"}.