skip to Main Content

EDIT: I fixed it by adding the return-object prop to v-select

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; 

The Course model:

const Course =  mongoose.model(
    "Course",
    new mongoose.Schema({
    name: String ,
    available: {type:Boolean , default :true} ,
})
);

module.exports = Course; 

2

Answers


  1. 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 ="";
    }
    

    EDIT:
    It might be a good idea to name your variables better, e.g.

    // in your v-select
    v-model="selectedCourse"
    
    // in your addItem function
    Course: this.selectedCourse
    or 
    Courses: this.selectedCourses
    
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search