VUE使用ElementUI下拉框 @change事件数据不回显问题
使用ElementUI下拉框 @change事件数据不回显
问题
在VUE中使用ElementUI的el-select下拉框,它是通过接口异步获取的下拉框数据,选择某一个值后,虽然在绑定的 @change 事件中能够看到已赋值成功,控制台输出也显示赋值操作完成数据变化,但是框上却没有显示选中的值。
解决方案
VUE它是无法监听动态新增的属性的变化,但是有一个方法可以为动态属性赋值,那就是$set。
<template> <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择文章标签"> @change="selectChange" <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> 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) } } } </script>
VUE下拉框数据及数据回显问题
下拉框默认显示第一个数据,及获取下拉框中选择的任意数据:
<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; }); }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
这篇文章主要介绍了vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-12Vuejs 实现简易 todoList 功能 与 组件实例代码
本文通过实例代码给大家介绍了Vuejs 实现简易 todoList 功能 与 组件,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
这篇文章主要介绍了golang zap 日志库使用(含文件切割、分级别存储和全局使用等),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02如何使用vuejs实现更好的Form validation?
如何使用vuejs实现更好的Form validation?这篇文章主要介绍了vue-form插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-04-04
最新评论