I've encountered an issue with my profie.html code that is intended to display division dropdown values using vue.js v-for and {{ val.division_name }}. However, the dropdown is rendering blank values even though there are supposed to be values present.
<select name="division_id" class="form-control form-select" id="division-id" aria-label="Default select example" v-model="formData.division_id" @change="onDivisionChange" required>
<option value="0">Select Division</option>
<option v-for="val in divisionListVue" :value="val.id">{{ val.division_name }}</option>
</select>
https://i.sstatic.net/vKv3I.png
My custom-vue.js code:
const app = Vue.createApp({
data() {
return {
divisionListVue: [],
calendarListVue: [],
formData: {
division_id: 0,
division_name: '',
calendar_id: null,
calendar_name: '',
},
};
},
methods: {
showModal() {
$("#modal1").modal('show');
},
fetchDivisionData() {
fetch('/users/api/divisions/')
.then(response => response.json())
.then(data => {
console.log(data);
this.divisionListVue = data;
console.log(this.divisionListVue);
})
.catch(error => {
console.error('Error fetching division data:', error);
});
},
fetchCalendarData() {
fetch('/users/api/calendars/')
.then(response => response.json())
.then(data => {
console.log(data);
this.calendarListVue = data;
console.log(this.calendarListVue);
})
.catch(error => {
console.error('Error fetching calendar data:', error);
});
},
onDivisionChange() {
const selectedDivision = this.divisionListVue.find(item => item.id === this.formData.division_id);
this.formData.division_name = selectedDivision ? selectedDivision.division_name : '';
},
onCalendarChange() {
const selectedCalendar = this.calendarListVue.find(item => item.id === this.formData.calendar_id);
this.formData.calendar_name = selectedCalendar ? selectedCalendar.calendar_name : '';
},
},
mounted() {
this.fetchDivisionData();
this.fetchCalendarData();
}
});
app.mount('#app');
urls.py
urlpatterns = [
path('register/', views.register, name='register'),
path('login/', views.login_request, name='login'),
path('profile/', views.profile, name='profile'),
path('api/divisions/', views.get_divisions, name='get_divisions'),
path('api/calendars/', views.get_calendars, name='get_calendars'),
]
views.py
# function to get the list of divisions
def get_divisions(request):
divisions = Division.objects.all()
data = [{'id': division.id, 'division_name': division.division_name} for division in divisions]
return JsonResponse(data, safe=False)
# function to get the list of calendars
def get_calendars(request):
calendars = Calendar.objects.all()
data = [{'id': calendar.id, 'calendar_name': calendar.calendar_name} for calendar in calendars]
return JsonResponse(data, safe=False)
Data format returned by console.log(data)
https://i.sstatic.net/q4LFs.png
Data format returned by
console.log(this.divisionListVue);The dropdown is displaying blank values despite having the necessary static files for vue to function correctly using
<script src="{% static 'js/vue.global.js' %}"></script>