VUE使用ElementUI下拉框@change事件数据不回显怎么解决
使用ElementUI下拉框 @change事件数据不回显
问题
在VUE中使用ElementUI的el-select下拉框,它是通过接口异步获取的下拉框数据,选择某一个值后,虽然在绑定的 @change 事件中能够看到已赋值成功,控制台输出也显示赋值操作完成数据变化,但是框上却没有显示选中的值。
解决方案
VUE它是无法监听动态新增的属性的变化,但是有一个方法可以为动态属性赋值,那就是$set。
@change="selectChange"
VUE下拉框数据及数据回显问题
下拉框默认显示第一个数据,及获取下拉框中选择的任意数据:
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; }); }