elementUI el-form 数据无法赋值且不报错解决方法
作者：xuelong-ming
本文主要介绍了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无法赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！