vue 后台获取列表型数据，加载下拉列表

最新推荐文章于 2025-05-23 22:51:47 发布

原创最新推荐文章于 2025-05-23 22:51:47 发布 · 4.9k 阅读

14 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue.js中利用v-model实现双向数据绑定，并结合axios请求动态加载下拉框选项。通过遍历后端返回的数据，将每个选项的名称显示在select元素中，同时在选项改变时触发changeModel函数更新模型。

实现效果

前端代码：

<!--v-model 实现双向数据绑定 绑定变量selectModel @change绑定changeModel($event)方法，为模型改变触发的函数-->
<select id='model' v-model="selectModel" style="width:100px" @change="changeModel($event)">
    <option>型号</option>
    <!--使用v-for对变量models进行遍历，每一项均作为select的option，{{item.name}}为显示的内容-->
	<option :value="item"  v-for="item in models" >{{item.name}}</option>
</select>

js：

data中声明变量selectModel及models

data:{	
    'selectModel':'型号',//初始select显示为型号
    'models':[]//models为数组类型
}

请求后台数据，赋值给models

getModels(id){
    var self = this;
    axios.get(‘请求地址’, {
        brandId: id+''//请求body参数
    })
    .then(function (response) {
        console.log(response);
        self.models=response.data.data;//赋值
    }).catch(function (error) {
        console.log(error);
    });
}

后台数据格式参考：

{"code":0,"data":[{"carId":9576,"name":"K 1600 GT"},{"carId":9577,"name":"R 1200 RT"},{"carId":9578,"name":"F 800 ST"},{"carId":9579,"name":"R 1200 R"}],"error":0,"message":"操作成功"}

获得选择框内容

changeModel(event){
    this.selectModel = event.target.value.name;
}