[Vuejs]-How to get an id of value in Vue.js

by

2👍

✅

the value of <select> is the selected <option>s value

You’ve set the value of the option to be the .name instead of the .id

const { ref, createApp, onMounted } = Vue;

createApp({
  setup() {
    const subject = ref("");
    const subjects = ref([]);
    const work_type = ref("");
    const work_types = ref([]);

    onMounted(() => {
      // simulate API load
      setTimeout(() => {
        subjects.value = [
          { id: 1, name: 'qwerty', },
          { id: 2, name: 'ytrewq', },
        ];
        work_types.value = [
          { id: 1, name: 'qwerty', },
          { id: 2, name: 'ytrewq', },
       ];
      }, 1000);
    });
    return { subject, subjects, work_type, work_types, };
  }
}).mount('#app');
#app {
  display:flex;
  justify-content: center;
  gap:2rem;
}
.contain {
  width:14rem;
}
.disp {
  margin-bottom: 1rem;
}



.as-console-wrapper { max-height: 0 !important}
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div class="contain">
    This is wrong
    <div class="disp">
      Selected ID is {{ subject }}
    </div>
    <div>
      <select class="form-select" id="inputSubject" v-model='subject'>
    
        <option disabled value="">Select Work Type</option>
    
        <option 
          v-for="item in subjects" 
          v-bind:value="item.name" 
          :key="item.id"
        >
          {{ item.name }}
        </option>
    
      </select>
    </div>
  </div>
  <div class="contain">
    This is right
    <div class="disp">
      Selected ID is {{ work_type }}
    </div>
    <div>
      <select class="form-select" id="inputSubject" v-model='work_type'>
    
        <option disabled value="">Select subject</option>
    
        <option 
          v-for="item in work_types" 
          v-bind:value="item.id" 
          :key="item.id"
        >
          {{ item.name }}
        </option>
    
      </select>
    </div>
  </div>
</div>

Leave a comment