vue elementUI el-form 数据无法赋值且不报错的问题及解决方法
作者：xuelong-ming
vue项目中使用elementUI的el-form组件,里面有部分后端数据遍历的字段和部分确定的字段,遇到个问题遍历的字段可以修改值但是确定的几个字段无法修改值,下面小编给大家分享vue elementUI el-form 数据无法赋值且不报错的问题及解决方法,感兴趣的朋友一起看看吧
vue 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>到此这篇关于vue elementUI el-form 数据无法赋值且不报错解决方法的文章就介绍到这了,更多相关vue elementUI el-form 数据无法赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！