v-if not nul
时间: 2024-01-27 09:15:01 浏览: 164
根据提供的引用内容,当在Vue表单中使用v-if控制表单项,并且出现在两个正常的el-form-item之间时,会导致表单校验报错"TypeError Cannot read properties of undefined"。解决方案是在el-form-item之外包一层div,用作if判断,这样可以避免报错。
以下是一个示例代码,演示了如何使用v-if进行判断:
```html
<template>
<div>
<el-form :model="form" ref="specialForm" :rules="rules" label-width="100px">
<el-form-item label="字段1">
<el-input v-model="form.field1" placeholder="请输入字段1"></el-input>
</el-form-item>
<div v-if="condition">
<el-form-item label="字段2">
<el-input v-model="form.field2" placeholder="请输入字段2"></el-input>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
field1: '',
field2: ''
},
rules: {
field1: [
{ required: true, message: '字段1不能为空', trigger: 'blur' }
],
field2: [
{ required: true, message: '字段2不能为空', trigger: 'blur' }
]
},
condition: true
};
},
methods: {
submitForm() {
this.$refs.specialForm.validate((valid) => {
if (valid) {
// 表单校验通过,提交表单
// ...
} else {
// 表单校验不通过,提示错误信息
// ...
}
});
},
resetForm() {
this.$refs.specialForm.resetFields();
}
}
};
</script>
```
在上述示例中,我们使用了v-if来判断是否显示字段2的el-form-item。当condition为true时,字段2的el-form-item会被渲染出来,否则不会显示。
阅读全文