VUE使用ElementUI下拉框@change事件数据不回显怎么解决
这篇文章主要介绍了VUE使用ElementUI下拉框@change事件数据不回显怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇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;
});
}
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码