vue fuzzy query and modify information drop-down menu ------------ learning record

HTML代码
<div id="box">
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">选择信息</h3>
            </div>
                <div class="modal-body">
                    <select v-model="clselected"
                            onselect="clselected" id="cn">   //:value may be provided on the value must be written: onselect value may be chosen to obtain a v-model binding worth changing by monitoring watch 
                        <option value = ""> select sections </ option>
                        <option v-for="clinic in clinics" :value="clinic.clId">
                            {{clinic.clName}}
                        </option>
                    </select>
                        <select v-if="doname" v-model="doselected" onselect="doselected" id="dn">
                            <option value="">请选医生</option>
                            <option v-for="doctor in doctors" :value="doctor.doId">
                                {{doctor.doName}}
                            </option>
                        </select>
    <div class="modal-footer">
        <button class="btn" type="button" data-dismiss="modal" aria-hidden="true">关闭</button>
        <button class = "btn btn- primary" type = "button" @ click = "saved"> determined </ Button> 
    </ div> 
                </ div> 
        </ div> 
    <INPUT type = "text" V-Model = "input_value" /> // fuzzy input query binding property to monitor changes in the value obtained by the Watch 
    <Table class = "Table Table-Striped"> 
        <thead> 
        <TH> 
            <TR> 
                <TD> ID </ TD> 
                < td> name </ td> 
                <td> Age </ td> 
                <td> gender </ td> 
                <td> physicians name </ td> 
                <td> sections </ td> 
                <td> time </ td>
                <td>操作</td>
            </tr>
        </th>
        </thead>
        <tbody>
        <tr v-show="you" v-for="guahao in entities">
            <td>{{guahao.id}}</td>
            <td>{{guahao.guaName}}</td>
            <td>{{guahao.guaAge}}</td>
            <td>{{guahao.guaSex}}</td>
            <td>{{guahao.doctorEntity.doName}}</td>
            <td>{{guahao.clinicEntity.clName}}</td>
            <td>{{guahao.guaTime}}</td>
            <td>
                <button class="btn btn-primary btn-sm" @click="modify(guahao)"  //返回当前的guahao数据
                        data-toggle="modal" data-target="#myModal">修改
                </button>
            </td>
        </tr>
        <td v-show="!you">无信息</td>
        </tbody>
    </table>

</ div> 
the JS Code:

<script>

var vm = new Vue({
    el: "#box",
    data: {
        guahao:"",
        clinics: [],
        doctors: [],
        clselected: "",
        doselected:"",
        you: false,
        doname: false,
        input_value: "",
        entities: [{
            id: "",
            guaName: "",
            guaAge: "",
            guaSex: "",
            doctorEntity: [{doName: ""}],
            clinicEntity: [{clName: ""}],
            guaTime: ""
        }]
    },
    watch: {
        input_value: function (data) {
            if(typeof data==='string')
                if(data.trim().length!==0){
                    this.search(data)
                }
        },
        clselected: function (data) {
            this.change(data)
        }
    },
    methods: {
        search: function (resdata) {
            var that = this;  //作用域不同要写that
            var guaName = resdata;
            $.ajax({
                url: "findbyname.action",
                data: {name: guaName},
                dataType: "json",
                type: "post",
                success: function (res) {
                    console.log(res.guahaodanEntities);
                    if (res.guahaodanEntities.length == 0) {
                        that.$data.you = false;
                    } else {
                        that.$data.you = true;
                        that.$data.entities = res.guahaodanEntities;
                    }
                },
                error: function () {
                    alert("zzzz")
                }
            })
        },
        modify: function (guahao) {
            console.log(guahao);
            var that = this;
            this.guahao = guahao;
            $.ajax({
                url: "findclinic.action",
                data: {},
                dataType: 'json',
                error: function (e) {
                    alert("1111")
                    console.log(e)
                },
                success: function (data) {
                    console.log(data);
                    data = data.clinicEntities;
                    that.$data.clinics = data;

                },
                type: 'POST'
            });
        },
        change: function (selected) {
            console.log(selected);
            this.$data.doname = true;
            var that = this;
            $.ajax({
                url: "modfd.action",
                data: {"findclinicID": selected},
                dataType: 'json',
                error: function (e) {
                    alert("1111")
                    console.log(e)
                },
                success: function (data) {
                    console.log(data);
                    data = data.doctorEntities;
                    that.$data.doctors = data;
                },
                type: 'POST'
            });
        },
        saved:function () {
            var that = this;
            console.log(this.clselected);
            console.log(this.doselected);
            $.ajax({
                url: "modghd2.action",
                data: {
                    "guahaodanEntity.id":that.$data.guahao.id,
                    "clinicEntity.clId":that.$data.clselected,
                    "doctorEntity.doId":that.$data.doselected
                },
                dataType: 'json',
                error: function (e) {
                    alert("1111");
                    console.log(e)
                },
                success: function (data) {
                    console.log(data)
                    that.guahao.doctorEntity.doName=data.doctorEntity.doName;
                    that.guahao.clinicEntity.clName=data.clinicEntity.clName;

                },
                type: 'POST'
            });
        }
    }
})

</script>