Unable to get value via two parameter in Vuejs - vue.js

Question

Here is the code I write to get value form API, Is it possible to send the two parameter like i send in the following example.
async getMainAssignmentsList(schoolId,lessonId) {
var getLearningStrategiesUrl =
this.apiBasedUrl + 'Assignment/' + schoolId +'/'+ lessonId + '/GetMainAssignment'
await this.axios
.get(getLearningStrategiesUrl)
.then(response => {
this.mainAssignmentList = response.data
})
.catch(function (error) {
console.log(error)
})
}
My requirement is that I need to select First 'form.schoolId' and after that 'form.lessonId' and on the basis of combined want to show data but, here is am unable to send parameter in the API.
<div class="col-sm-12">
<b-form-select v-model="form.schoolId" class="mt-2" placeholder="Please select an option" #input="getMainAssignmentsList(form.schoolId)">
<option :value="null">Select school</option>
<option v-for="School in allSchoolsList" :value="School.id" :key="School.id">{{School.schoolName}}</option>
</b-form-select>
</div>
<div class="col-sm-12" >
<b-form-select v-model="form.lessonId" class="mt-2" #input="getMainAssignmentsList(form.lessonId)">
<option :value="null">Please select Lesson</option>
<option v-for="Lesson in allLessons" v-bind:value="Lesson.id" :key="Lesson.id">{{Lesson.name}}</option>
</b-form-select>
</div>
<!--- Here want to show value in drop down --->
<div class="col-sm-12" >
<b-form-select v-model="parentAssignmentId" class="mt-2" >
<option :value="null">Please select Main Assignment</option>
<option v-for="MainAssignment in mainAssignmentList" v-bind:value="MainAssignment.id" :key="MainAssignment.id">{{AssignmentTypes.name}}</option>
</b-form-select>
</div>
Currently my URL is showing following value:
Request URL:http://localhost:51711/api/Assignment/undefined/undefined/GetMainAssignment

Answer 1

You can always try something like this and let bootstrap-vue take care of most of the heavy lifting.
<template>
<b-container>
<b-row>
<b-col sm="12">
<b-form-select
v-model="selectedSchoolId"
class="mt-2"
placeholder="Please select an option"
:options="allSchoolsList"
></b-form-select>
</b-col>
<b-col sm="12">
<b-form-select v-model="selectedLessonId" class="mt-2" :options="allLessons"></b-form-select>
</b-col>
<b-col sm="12">
<b-form-select
v-model="parentAssignmentId"
class="mt-2"
placeholder="Please select Main Assignment"
:options="mainAssignmentList"
></b-form-select>
</b-col>
<b-col>
<b-btn #click="getMainAssignmentsList">Submit</b-btn>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
data() {
return {
selectedLessonId: null,
selectedSchoolId: null,
parentAssignmentId: null,
allSchoolsList: [
{ value: null, text: "Please select an option" },
{ value: "schoola", text: "School A" },
{ value: "schoolb", text: "School B" },
{ value: "schoolc", text: "School C" },
{ value: "schoold", text: "School D" }
],
allLessons: [
{ value: null, text: "Please select an option" },
{ value: "lessona", text: "Lesson A" },
{ value: "lessonb", text: "Lesson B" },
{ value: "lessonc", text: "Lesson C" },
{ value: "lessond", text: "Lesson D" }
],
mainAssignmentList: [
{ value: null, text: "Please select an option" },
{ value: "assignmenta", text: "Assignment A" },
{ value: "assignmentb", text: "Assignment B" },
{ value: "assignmentc", text: "Assignment C" },
{ value: "assignmentd", text: "Assignment D" }
]
};
},
methods: {
getMainAssignmentsList() {
let apiArgs = {
lesson: this.selectedLessonId,
school: this.selectedSchoolId
};
console.log(apiArgs);
//Call API using apiArgs
}
}
};
</script>
I removed the options tags and changes some divs to b-col tags. If you want to manual make your own options tags you will need to use the correct tag like this example taken straight from the docs:
<b-form-select-option value="C">Option C</b-form-select-option>