Vue ——下拉框数据及数据回显

最新推荐文章于 2025-01-02 13:13:08 发布

原创最新推荐文章于 2025-01-02 13:13:08 发布 · 5.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue.js应用中实现下拉框的默认显示、选择事件监听以及数据回显功能。通过v-model绑定数据，设置created钩子初始化下拉框默认值，并使用getvalue_typeected方法处理选择事件。同时，展示了getCurIdData方法从API获取数据并更新下拉框选中值的示例。

下拉框默认显示第一个数据，及获取下拉框中选择的任意数据：

<label>类型：</label>
 <select v-model="value_type" @change="getvalue_typeected(value_type)">
   <option :value="item" v-for="item in types" :key="item">{{
     item
   }}</option>
 </select>

export default {
	data(){
		return {
			value_type: "",
      		types: ["STRING", "BOOLEAN", "INTEGER",'DATETIME','DATE'],
		}
	},
	created(){
	    //下拉框默认显示第一个
		this.value_type = this.types[0];
	},
	methods:{
		getvalue_typeected(val) {
	      this.value_type = val;
	    },
	}
}

下拉框数据回显：

getCurIdData() {
  this.$http
    .get(`/api/${id}`)
    .delegateTo(api_request)
    .then((data) => {
      this.value_type= data.value_type;
    });
}