vue elementUI el-form 数据无法赋值，并且不报错
需求
vue项目中使用elementUI的el-form组件，里面有部分后端数据遍历的字段和部分确定的字段。
问题
遍历的字段可以修改值，但是确定的几个字段无法修改值。
解决思路
在Vue实例创建时，form对象部分字段未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新。
可以Vue的全局this.$set()
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
this.$set()用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性。
this.$set()的语法
1 2 3 4 | this.$set(target, propertyName/index, value)
参数一：target: 要更改的数据源（可以是一个对象或者数组）
参数二：propertyName/index: 要更改的具体数据 （索引）
参数三：value: 重新赋的值(any)
|
代码
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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 数据无法赋值内容请搜索代码部落以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码部落！
本文章来源于网络，作者是：小编，由代码部落进行采编，如涉及侵权请联系删除！转载请注明出处：https://daimabuluo.cc/JavaScript/253.html
