Django模板动态生成的与bootstrap-select渲染冲突？

Question

问题描述

Django模板动态生成<select>的<option>，前端渲染为bootstrap-select组件；F5刷新页面后bootstrap-select组件下方会多出一个相同的组件。

重要信息

1.我还使用了Vue.js（初次使用，菜鸟级别的），不知道是不是Vue缓存了bootstrap-select组件的DOM。2.bootstrap-select组件并未被我封装成Vue组件。
3.<select-component></select-component>就是第一个bootstrap-select,被我封装成了Vue组件的，后面2个没封装的，就出现了这种奇葩渲染bug。

相关代码

html:

    <div id="queryPanel" class="card border border-info mt-1 mb-1">
      <div id="queryHeader" class="card-header">
        <query-component hrefs="#collapseOne"></query-component>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#queryPanel">
        <div class="card-body">
            <div class="container m-0">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <select-component></select-component>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <select class="form-control selectpicker" id="unit" onchange="getSquadron()">
                                {% for unit in units %}
                                <option value="{{ unit }}">{{ unit }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <select class="form-control selectpicker" id="squadron">
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group btn-group">
                            <button type="button" class="btn btn-primary" onclick="ajaxquery(this)">
                                <i class="fa fa-search" aria-hidden="true"></i> 查询
                            </button>
                            <button type="button" class="btn btn-primary" onclick="exportexcel(this)">
                                <i class="fa fa-file-excel-o" aria-hidden="true"></i> 导出
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <pure-date-component id="datetimepicker1" inputid="starttime"></pure-date-component>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <pure-date-component id="datetimepicker2" inputid="endtime"></pure-date-component>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <input id="begintime" type="text" value="{{ regist_time__min }}" class="form-control" readonly />
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div id="dbState" class="input-group">
                            <input id="updatetime" type="text" v-bind:class="['form-control', 'text-dark', 'bg-white', 'border', expire ? 'border-danger' : 'border-success']" value="{{ regist_time__max }}" v-on:change="getdbState($event)" readonly="readonly"/>
                            <div class="input-group-append">
                                <button v-bind:class="['btn', 'text-white', expire ? 'bg-danger' : 'bg-success']">
                                    {% verbatim %}
                                    {{ describe }}
                                    {% endverbatim %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>

js:

function getSquadron(){
    var currentUnit = $('#unit').val();
    $.ajax({
        url:"/getsquadron",
        type:'POST',
        data:{
            unit:currentUnit,
        },
        success: function (data) {
            $('#updatetime').val(data.regist_time__max);
            $('#begintime').val(data.regist_time__min);
            // 手动触发js原生onchange事件,原因：vue无法捕获jquery触发的change事件
            var ute = document.getElementById('updatetime');
            if(ute.fireEvent) {
                ute.fireEvent('onchange');
            } else {
                ev = document.createEvent("HTMLEvents");
                ev.initEvent("change", false, true);
                ute.dispatchEvent(ev);
            }
            $('#squadron').empty();
            $('#squadron').append("<option value='" + currentUnit + "'>" + currentUnit + "</option>");
            // jQuery语法, 也可用for循环data.squadron[i]数组下标方式取值
            $.each(data.squadron, function(index, value){
                 $('#squadron').append("<option value='" + value + "'>" + value + "</option>");
            });
            // 刷新Bootstrap-select控件
            $('#squadron').selectpicker('refresh');
            // 强制重新渲染Bootstrap-select控件
            $('#squadron').selectpicker('render');
        }
    });
}

py

# 主页
def index(request):
    units = getUnits()
    # key_name:regist_time__max
    updatetime = getUpdatetime(units[0])
    # key_name:regist_time__min
    begintime = getBegintime(units[0])
    data = {}
    data['units'] = units
    data.update(updatetime)
    data.update(begintime)
    return render(request, 'index.html', data)

遇到的困难

因为不知道到底是Django, Vue还是bootstrap-select的问题，所以无法定位错误。还请各位大神指点迷津，小弟感激不尽！

Answer 1

自己的问题自己顶，小弟已经不纠结这个问题了，除了Django模板渲染在服务端完成，其他的Vue渲染，bootstrap-select渲染（基于jquery），都是在客户端异步完成的吧，就好比编程练习题里的多线程Demo,渲染顺序是乱的，肯定要出问题。把bootstrap-select封装成Vue组件,相当于显式地让浏览器先渲染Vue组件，等Vue组件渲染完毕后，再渲染bootstrap-select组件，勉强跳过这个坑。