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中axios防止多次触发终止多次请求的示例代码(防抖)
这篇文章主要介绍了vue中axios防止多次触发终止多次请求的实现方法(防抖),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02unplugin-svg-component优雅使用svg图标指南
这篇文章主要为大家介绍了unplugin-svg-component优雅使用svg图标指南,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03Vue3 响应式 API 及 reactive 和 ref&
响应式是一种允许以声明式的方式去适应变化的编程范例,这篇文章主要介绍了关于Vue3响应式API及reactive和ref的用法,需要的朋友可以参考下2023-06-06
最新评论