我在我的profie.html中有这样一行代码，它应该使用vue.js v-for和{{ val.division_name }}来显示除法运算的值。相反，这段代码返回的除法运算值是空白的，但我可以告诉你除法运算正在渲染的值，它只是空白值。

<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>

字符串
x1c 0d1x的数据
这是我的custom-vue.js

const app = Vue.createApp({
  data() {
    return {
        divisionListVue: [], // Initialize divisionList with an empty array
        calendarListVue: [], // Initialize calendarList with an empty array
        formData: {
            division_id: 0, // Initialize division_id with 0
            division_name: '', // Initialize with an empty string
            calendar_id: null, // Initialize calendar_id with 0
            calendar_name: '', // Initialize with an empty string
        },
    };
},
methods: {
    showModal() {
        // Show the Bootstrap modal by selecting it with its ID and calling the 'modal' method
        // $('#myModal').modal('show');
        $("#modal1").modal('show'); // Show the modal on page load
    },
    // Function to fetch division data
    fetchDivisionData() {
        fetch('/users/api/divisions/') // Replace with the actual API endpoint
        .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);
        });
    },
    // Function to fetch calendar data
    fetchCalendarData() {
        fetch('/users/api/calendars/') // Replace with the actual API endpoint
        .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() {
        //console.log('Selected Division ID:', this.formData.division_id);
        //console.log(this.divisionListVue);
        
        const selectedDivision = this.divisionListVue.find(item => item.id === this.formData.division_id);
        this.formData.division_name = selectedDivision ? selectedDivision.division_name : '';
        
      },
    onCalendarChange() {
        //console.log('Selected Calendar ID:', this.formData.calendar_id);
        //console.log(this.calendarListVue);
        const selectedCalendar = this.calendarListVue.find(item => item.id === this.formData.calendar_id);
        this.formData.calendar_name = selectedCalendar ? selectedCalendar.calendar_name : '';
        
    },
   
},
mounted() {
     // Fetch division and calendar data when the component is mounted
    this.fetchDivisionData();
    this.fetchCalendarData();
 } // end of the mounted() function
});
app.mount('#app');

型

url.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)

型
这是console.log(data)返回的数据格式

的
这是console.log(this.divisionListVue);返回的数据格式

的
是什么原因导致vue显示空值？我已经有了vue使用这个脚本<script src="{% static 'js/vue.global.js' %}"></script>工作所需的静态文件。