使用vue select2做二级联动

HTML部分：

<div class="row">
        <div class="col-xs-12">
            <form id="entityForm">
<!--一级菜单-->
                <div class="form-group">
                    <label class="control-label">请选择酒店集团</label>
                    <select name="blocId" class="form-control" id="blocId" data-live-search="true"
                            v-model="entity.blocId">

                    </select>
                </div>
                <!--二级菜单-->
                <div class="form-group">
                    <label class="control-label">请选择酒店</label>
                    <select name="hiId" class="form-control" id="hiId" data-live-search="true"
                            v-model="entity.hiId">

                    </select>
                </div>
           </form>
        </div><!-- /.box-body -->
    </div>

js部分：

$("#blocId").select2({
                        placeholder: "请选择",
                        ajax: {
                            url: baseUrl + "bloclist.json",
                            async: false,
                            xhrFields: {withCredentials: false},
                            processResults: function (r) {
                                var displayArray = new Array();
                                r.data.forEach(function (val) {
                                    displayArray.push({id: val.blocId, text: val.blocName});
                                });
                                return {
                                    results: displayArray
                                };
                            }
                        }
                    });


                    $("#blocId").on("change", function (e) {

                        $("#hiId").html("");
                        var val=$(this).val();
                        var name = $(this).attr("name");
                        _self.entity[name] = val;
                        _self.entity[name+"_name"] = $(this).select2('data')[0].text;
                        $("#hiId").select2({
                            placeholder: "请选择",
                            ajax: {
                                url: baseUrl + "hotellist/"+val,
                                async: false,
                                xhrFields: {withCredentials: false},
                                processResults: function (r) {
                                    var displayArray = new Array();
                                    r.data.forEach(function (val) {
                                        displayArray.push({id: val.hiId, text: val.hiName});
                                    });
                                    return {
                                        results: displayArray
                                    };
                                }
                            }
                        });
                        $("#hiId").on("change", function (e) {
                            var val=$(this).val();
                            var name = $(this).attr("name");
                            _self.entity[name] = val;
                            _self.entity[name+"_name"] = $(this).select2('data')[0].text;
                        });
                    });

                },