Vuejs- How to show name values in a <v-select> but send the ID in the axios POST request-CodePudding

When I add a student to a database from a vuetify form, I want to be able to assign them a course. But the course has to be in a list of available courses (also in the db). I managed to do that and show all the available courses in a dropdown menu.

However, when I add the new student to the database, it sends the name of the course but not the ID of the course, so the database doesn't recognize it. I would like to link the name of the course from the v-select dropdown menu to its object ID and send the ID in the POST request.

My form component:

       <v-select
       :items="courses"
       v-model="Courses"
   
    item-value="name"
    item-text="name"
    label="Available courses"
    prepend-icon="folder"
   
  >
    <template v-slot:item="{ item, attrs, on }">
      <v-list-item
        v-bind="attrs"
        v-on="on"
        
      >
        <v-list-item-title
          :id="attrs['aria-labelledby']"
          v-text="item.name"
          
        ></v-list-item-title>
      </v-list-item>
    </template>
  </v-select>

Where I store all the available courses:

     computed: {
         courses() {
      return this.$store.state.courses;
    },

The axios POST method:

methods: {
       async addItem(){
        const response = await axios.post("http://localhost:4000/api/student", {
        name: this.name,
        Courses: this.courses,
      });
      this.items.push(response.data);
      this.name = "";
      this.courses ="";
      },
    },

My mongoDB model:

const Student =  mongoose.model(
    "Student",
    new mongoose.Schema({
    name: String ,
    Courses:  
        {
        type: mongoose.Schema.Types.ObjectId,
        ref:"id"
        },
})
);

module.exports = Student;

CodePudding user response：

Need more information on how each course object looks, and your data, but essentially, set the item-value prop to the item's object ID, and under the addItem function,

async addItem(){
  const response = await axios.post("http://localhost:4000/api/student", {
    id: this.courseId,
    Courses: this.courses,
  });
  this.items.push(response.data);
  this.courseId = "";
  this.courses ="";
}

CodePudding user response：

If you just want to get id of the course in v-model of v-select, You can simply use item-value="id" instead of item-value="name".

Live Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selectedCourse: null,
    courses: [{
      id: 1,
      name: 'Course 1'
    }, {
      id: 2,
      name: 'Course 2'
    }, {
      id: 3,
      name: 'Course 3'
    }, {
      id: 4,
      name: 'Course 4'
    }, {
      id: 5,
      name: 'Course 5'
    }],
  }),
  methods: {
     getSelected() {
       console.log(this.selectedCourse) // ID of the selected course
     }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material Icons"/>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
          <v-select
            :items="courses"
            v-model="selectedCourse"
            label="Available courses"
            prepend-icon="folder"
            item-value="id"
            item-text="name"
            @change="getSelected"
          ></v-select>
    </v-container>
  </v-app>
</div>