Vue.js中select选项显示空白值的问题排查求助

在profile.html中使用Vue.js的v-for指令渲染部门下拉选项，预期通过{{ val.division_name }}显示部门名称，但下拉框仅渲染出空白选项（能看到选项数量但无内容）。控制台打印的data和this.divisionListVue均显示数据格式正确，且已引入Vue静态资源<script src="{% static 'js/vue.global.js' %}"></script>。

profile.html代码 #

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

custom-vue.js代码 #

const app = Vue.createApp({
  data() {
    return {
        divisionListVue: [], // 初始化部门列表为空数组
        calendarListVue: [], // 初始化日历列表为空数组
        formData: {
            division_id: 0, // 初始化部门ID为0
            division_name: '', // 初始化为空字符串
            calendar_id: null, // 初始化日历ID为null
            calendar_name: '', // 初始化为空字符串
        },
    };
},

methods: {
    showModal() {
        $("#modal1").modal('show'); // 页面加载时显示模态框
    },
    // 获取部门数据的函数
    fetchDivisionData() {
        fetch('/users/api/divisions/') // 替换为实际API端点
        .then(response => response.json())
        .then(data => {
            console.log(data);
            this.divisionListVue = data;
            console.log(this.divisionListVue);
        })
        .catch(error => {
            console.error('获取部门数据出错:', error);
        });
    },
    // 获取日历数据的函数
    fetchCalendarData() {
        fetch('/users/api/calendars/') // 替换为实际API端点
        .then(response => response.json())
        .then(data => {
            console.log(data);
            this.calendarListVue = data;
            console.log(this.calendarListVue);
        })
        .catch(error => {
            console.error('获取日历数据出错:', 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();
 } // 结束mounted函数
});

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代码 #

# 获取部门列表的函数
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)

# 获取日历列表的函数
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)

根据你提供的信息，控制台已确认数据格式正确，优先排查以下核心问题：

1. Django与Vue模板语法冲突（最可能原因） #

Django模板和Vue.js默认都使用{{ }}作为变量插值语法，导致Django会先解析Vue的{{ val.division_name }}，将其视为Django模板变量。但Django上下文里没有这个变量，最终渲染成空字符串，所以下拉选项显示空白。

解决方法二选一：

• 修改Vue插值分隔符：创建Vue应用时自定义分隔符，避免和Django冲突：

  const app = Vue.createApp({
    delimiters: ['[[', ']]'], // 将Vue插值符改为[[ ]]
    data() {
      // 原有代码不变
    },
    // 其他配置不变
  });
  

  同时把模板中的{{ val.division_name }}替换为[[ val.division_name ]]。

• 用Django verbatim标签包裹Vue代码：让Django不解析标签内的{{ }}语法：

  {% verbatim %}
  <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>
  {% endverbatim %}
  

2. 额外排查项 #

• Vue挂载范围：确认<select>标签在Vue挂载的#app元素内部，Vue只能管理挂载元素内的DOM。
• 数据类型匹配：检查API返回的id类型（字符串/数字）与formData.division_id的初始类型是否一致，避免后续选择逻辑异常（虽不直接导致空白，但需确认）。

内容的提问来源于stack exchange，提问作者Eli