vue的模糊查询和下拉菜单修改信息------------学习记录

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可以设置上value 一定要写： onselect可以将选择的value获取 绑定一个v-model通过watch监视值得改变                        <option value="">请选择科室</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" >确定</button>    </div>                </div>        </div>    <input type="text" v-model="input_value"/> //模糊查询 绑定属性通过watch来监视input里得值变化    <table class="table table-striped">        <thead>        <th>            <tr>                <td>ID</td>                <td>姓名</td>                <td>年龄</td>                <td>性别</td>                <td>医生姓名</td>                <td>科室</td>                <td>时间</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>JS代码：

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

原文地址：https://www.cnblogs.com/King-Jin/p/10987487.html