SoFunction
Updated on 2025-03-10

elementUI el-form data cannot be assigned and no errors are reported

need

The el-form component of elementUI is used in the vue project, which contains some fields traversed by backend data and some fields determined.

question

The traversed fields can modify the value, but the determined fields cannot modify the value.

Solution

When Vue instance is created, some fields of the form object are not declared, so they are not converted into responsive properties by Vue, and naturally the update of the view will not be triggered.
This.$set() can be used in Vue

Add a property to the responsive object and make sure that the new property is also responsive and triggers view updates.
This.$set() is used to add new properties to responsive objects, because Vue cannot detect ordinary new properties.

The syntax of this.$set()

this.$set(target, propertyName/index, value)
Parameter 1：target: Data source to change（It can be an object or an array）
Parameter 2：propertyName/index: Specific data to be changed （index）
Parameter Three：value: Reassigned value(any)

Code

html

<template>
	<el-form :model="ruleForm">
		<el-form-item v-for="item in key_list" :key="" :label="" :prop="">
			<div v-if=" === 'number'">
				{{ setNumber(ruleForm[]) }}
			</div>
			<div v-else>
				<el-input v-model="ruleForm[]" />
			</div>
		</el-form-item>
		<el-form-item label="stage">
			<el-select v-model="" placeholder="Select Phase">
            	<el-option v-for="item in stageList" :key="" :label="" :value="" />
            </el-select>
        </el-form-item>
		<el-form-item label="time">
			<el-date-picker v-model="" type="datetime" placeholder="Select a date and time"
                  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() {
		()
	},
  	methods: {
  		// Initialization	    init() {
      		({ number: this.$ }).then(res => {
        		if ( === 200) {
          			this.key_list = res.key_list
          			 = 
		            this.$set(, 'time', null)
		            this.$set(, 'stage', null)
        		} else {
        			this.$()
        		}
			})
		},
  	}
}
</script>

This is the article about the solution to the elementUI el-form data that cannot be assigned and does not report errors. For more related content that cannot be assigned to elementUI el-form, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!