使用ElementUI下拉框 @change事件数据不回显
问题
在VUE中使用ElementUI的el-select下拉框,它是通过接口异步获取的下拉框数据,选择某一个值后,虽然在绑定的 @change 事件中能够看到已赋值成功,控制台输出也显示赋值操作完成数据变化,但是框上却没有显示选中的值。
解决方案
VUE它是无法监听动态新增的属性的变化,但是有一个方法可以为动态属性赋值,那就是$set。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | @change= "selectChange" export default { data() { return { paper:[{ title: '' , author: '' }] options: [{ value: '1' , label: 'HTML' }, { value: '2' , label: 'CSS' }, { value: '3' , label: 'JavaScript' }], value: [] } },methods{ // 操作下拉框选中事件 selectChange(val) { const title = this .options.find(item=>item.value===val).label this .$set( this .paper, this .paper.title, title) } } } |
VUE下拉框数据及数据回显问题
下拉框默认显示第一个数据,及获取下拉框中选择的任意数据:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <label>类型:</label> {{ item }} 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; }, } } |
下拉框数据回显:
1 2 3 4 5 6 7 8 | getCurIdData() { this .$http .get(`/api/${id}`) .delegateTo(api_request) .then((data) => { this .value_type= data.value_type; }); } |
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。