vue从数据库获取数据显示到页面下拉框里面;目前有后端的查询所有数据的端口,求源码。
data(){
return {
}
},
created(){
this.getOptions()
},
methods:{
getOptions(){
axios.get('接口名称')
.then( (res) => {
//请求返回的数据
console.log(res)
//赋值
this. objData = res
})
.catch( (error) => {
console.log(error);
});
}
}
后端的代码怎么写
这个只需要将后端数据,动态赋值到 vue 下拉框的列表中即可。vue 的页面渲染是可以数据驱动,这是一个比较简单的问题,最好自己能动手写写。代码就是一楼哪位的!
<template>
<div class="demo">
<select @change="optionChange"
v-model="selectObj">
<option v-for='item in objData'
:key="item.id"
:value="item">
{{item.name}}
</option>
</select>
<div v-if='selectObj'>
<span>name: {{selectObj.name}}</span>
<span>id: {{selectObj.id}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
objData: [
{ name: '点菜用户数', id: '1' },
{ name: '点菜新用户数', id: '2' },
{ name: '首次留联系方式人数', id: '3' },
{ name: '已有联系方式人数', id: '4' }
], //列表数据
selectObj: {} //选中数据
}
},
methods: {
optionChange() {
console.log(this.selectObj)
console.log('可以请求数据了')
}
}
}
</script>