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

Issue

I am getting the data from API and I'm stuck with getting an id in order to send it back.

Example of data from API:

{
  id:1,
  name: 'qwerty',
},
{
  id:2,
  name: 'ytrewq',
},

API endpoint is expecting sending id via axios.post, not value, but v-model gets exactly the value.

  <div class="form-group col-md-9">
            <select class="form-select" id="inputSubject" v-model='subject'>
            <option disabled value="">Select subject</option>
            <option v-for="item in subjects" v-bind:value="item.name" :key="item.id">{{ item.name }}</option>  
            </select> 

  </div>

  <div class="form-group col-md-9">
            <select class="form-select" id="inputWorkType" v-model='work_type'>
            <option disabled value="">Select work type</option>
            <option v-for="item in work_types" v-bind:value="item.name" :key="item.id">{{item.name}}</option>  
            </select> 

  </div>
<script>

export default {
  data () {
    return {
      subject: '',
      work_type: '',

    subjects: [],
    work_types: [],

    }
  },
  methods: {
       // getting the data
    getSubjectsWorkTypes() {

    axios
    .all([axios.get('/api/v1/subjects/'),
          axios.get('/api/v1/worktypes/')
        ])
    .then (
         axios.spread((firstResponse, secondResponse) => {
            console.log(firstResponse.data)
            console.log(secondResponse.data)    
            this.subjects = firstResponse.data
            this.work_types = secondResponse.data
        }))

    
    },
    // sending the data
    submitForm() {
      console.log(this.subject.key())
      const formData = {
      subject:   this.subject,
      work_type: this.work_type,
      }
      axios  
      .post("api/v1/orders/", formData)
    },

}
</script>

is there any smart way to get and send id? the only idea I have is to build the function which filters an array into finding id for the selected string...

Solution

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>

Answered By - Jaromanda X

Answer Checked By - David Marino (PHPFixing Volunteer)