elementUI el-form 数据无法赋值且不报错解决方法
需求
vue项目中使用elementUI的el-form组件,里面有部分后端数据遍历的字段和部分确定的字段。
问题
遍历的字段可以修改值,但是确定的几个字段无法修改值。
解决思路
在Vue实例创建时,form对象部分字段未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新。
可以Vue的全局this.$set()
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
this.$set()用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性。
this.$set()的语法
this.$set(target, propertyName/index, value) 参数一:target: 要更改的数据源(可以是一个对象或者数组) 参数二:propertyName/index: 要更改的具体数据 (索引) 参数三:value: 重新赋的值(any)
代码
html
<template>
<el-form :model="ruleForm">
<el-form-item v-for="item in key_list" :key="item.key" :label="item.title" :prop="item.key">
<div v-if="item.key === 'number'">
{{ setNumber(ruleForm[item.key]) }}
</div>
<div v-else>
<el-input v-model="ruleForm[item.key]" />
</div>
</el-form-item>
<el-form-item label="阶段">
<el-select v-model="ruleForm.stage" placeholder="选择阶段">
<el-option v-for="item in stageList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="ruleForm.time" type="datetime" placeholder="选择日期时间"
value-format="yyyy-MM-dd HH:mm:ss" />
</el-form-item>
</el-form>
</template>
js
<script>
import api from './api'
export default {
data() {
key_list: [],
ruleForm: {},
},
created() {
this.init()
},
methods: {
// 初始化
init() {
api.Init({ number: this.$route.query.number }).then(res => {
if (res.code === 200) {
this.key_list = res.key_list
this.ruleForm = res.data
this.$set(this.ruleForm, 'time', null)
this.$set(this.ruleForm, 'stage', null)
} else {
this.$message.error(res.msg)
}
})
},
}
}
</script>到此这篇关于elementUI el-form 数据无法赋值且不报错解决方法的文章就介绍到这了,更多相关elementUI el-form无法赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令)
这篇文章主要介绍了vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Vue项目打包(build)时,自动打以时间命名的压缩包方式
这篇文章主要介绍了Vue项目打包(build)时,自动打以时间命名的压缩包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10


最新评论