как получить значение в выбранном выпадающем списке в VUE

#vue.js #vuex #dropdown #v-select

Вопрос:

у меня есть свой код

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>
 

здесь я редактирую данные в раскрывающемся списке

и эта фукция

 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;
    },
}
 

Я создал выпадающий список, содержащий данные о стоимости месяца, а именно идентификатор. здесь мне удалось получить значение из базы данных, которая содержит значение «1», но при редактировании значение не отображается в раскрывающемся списке, при использовании v-текста отображается это значение, как получить значение в v-select?

как это могло случиться?

изображение

Ответ №1:

Когда вы присваиваете значение тому add_graduate_month , которое прикреплено к v-select , то значение add_graduate_month должно совпадать с одним из значений из item_bulan .

Итак, если вы получаете 1 из базы данных, то ваше add_graduate_month значение должно быть {id:'01', name:"Jan"} .

Комментарии:

1. Я удалил число 0 в item_month, но все еще не могу ввести это значение в v-select @Yash Maheshwari

2. Но вам нужно иметь значение в том же формате, что и один из объектов в массиве item_bulan.

3. хорошо, только что у меня есть атрибут name в item_bulan, поэтому он содержит только идентификатор в item_bulan, но все еще не может

4. Вместо этого в данных add_graduate_month: null установите значение {id:’1′, имя:»Ян»}. Затем вы увидите Jan в v-select, поэтому я имею в виду, что всякий раз, когда вы присваиваете значение add_graduate_month , оно должно быть в этом формате {id: 1, name: 'Feb'} . Если вы присвоите add_graduate_month с помощью простого значения что-то вроде 1, то это не сработает.

5. add_graduate_month-это результат динамической вставки пользователем.