Django+Vue集成Select2后，字段空值验证逻辑异常问题排查

问题根源 #

Select2初始化后会隐藏原生<select>元素，替换为自定义DOM结构，导致Vue的v-model无法自动同步选中值——原生select的change事件不会被正确触发，Vue的selectedBank数据一直是空字符串，所以isBankDisabled始终返回true，bank和bank_code字段一直处于禁用状态。

解决方案 #

通过监听Select2专属事件，手动同步选中值到Vue的data中，具体步骤如下：

1. 移除重复的Select2初始化代码
   你的Vue代码beforeMount里重复写了Select2初始化，和base.html里的代码冲突，直接删掉这部分。

2. 同步初始选中值
   在Vue的beforeMount钩子中，把原生select的初始值同步到selectedBank。

3. 监听Select2的选择/取消事件
   在Vue的mounted钩子中，监听Select2的select2:select和select2:unselect事件，手动更新selectedBank的值。

修改后的Vue代码示例 #

var app = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
        street: '',
        district: '',
        city: '',
        state: '',
        country: '',
        cpf: '',
        name: '',
        mother_name: '',
        father_name: '',
        nationality: '',
        selectedBank: '',
        bank: '',
        bank_code: '',
        bankAccountOwnerName: '',
        bankAccountCPF: '',
        birth_date: '',
        public_person: false,
        isLoading: false,
        isPostalCodeFound: true,
        isCPFFound: true,
        display_form_address: false,
        display_form_bank: false,
        hasError: '{{ error }}',
    },
    beforeMount: function () {
        this.bank = this.$el.querySelector('#id_form-0-bank').value
        this.bank_code = this.$el.querySelector('#id_form-0-bank_code').value
        this.postal_code = this.$el.querySelector('#id_form-0-postal_code').value
        
        // 同步Select2初始选中值到Vue
        const selectEl = this.$el.querySelector('[data-select2-enabled]');
        if (selectEl) {
            this.selectedBank = selectEl.value;
        }
    },
    mounted: function () {
        const vm = this;
        // 监听Select2选择事件
        $('[data-select2-enabled]').on('select2:select', function (e) {
            vm.selectedBank = e.params.data.id;
        });
        // 监听Select2取消选择事件
        $('[data-select2-enabled]').on('select2:unselect', function () {
            vm.selectedBank = '';
        });
    },
    computed: {
        isBankDisabled: function() {
            return this.selectedBank === '';
        }
    },
    methods: {
        // 保留原有onBankChange逻辑（如果需要）
        onBankChange: function() {
            // 比如同步银行名称和代码到对应字段
        }
    }
});

额外检查点 #

• 确保Django Form中select_bank的空选项值为空字符串，这样selectedBank === ''的判断才会准确。
• 确认base.html中的Select2初始化代码只执行一次，避免重复初始化导致的DOM异常。

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