vue下拉框怎样从数据库获取数据?

vue从数据库获取数据显示到页面下拉框里面;目前有后端的查询所有数据的端口,求源码。图片说明

3个回答

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

data(){
 return {
 }
},
created(){
 this.getOptions()
},
methods:{
  getOptions(){
      axios.get('接口名称')
    .then( (res) => {
           //请求返回的数据
        console.log(res)
                //赋值
                this. objData = res
    })
    .catch( (error) => {
        console.log(error);
    });
    }
}

这个只需要将后端数据,动态赋值到 vue 下拉框的列表中即可。vue 的页面渲染是可以数据驱动,这是一个比较简单的问题,最好自己能动手写写。代码就是一楼哪位的!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐