使用 Vue.js 和元素 UI，如何根据复选框值使必填字段可选?

Question

我在 Vue.js 项目中使用元素 UI 库，两个输入字段都是必需的。单击复选框后如何使第一个字段不需要？

模板 ：

<el-form :model="MainForm.dynamicValidateForm" ref="MainForm" class="demo-dynamic" :rules="rules" :inline-message='false'>
<el-form-item label="label-1" prop="value1">
<el-input v-model="MainForm.value1" ></el-input>
<el-form-item>    
<el-form-item label="label-2" prop="value2">
<el-input v-model="MainForm.value2" ></el-input>
<el-form-item>
<el-form-item>
<el-checkbox v-model="MainForm.mycheckbox">Make first optional</el-checkbox>
</el-form-item>      
</el-form>

应用.js：

new Vue({
el: '#app',
data: {
MainForm:
{
value1: '',
value2: '',
mycheckbox: false
},  
rules: {
value1: [
{ required: true, message: 'Please input Activity name'},
],
value2: [
{ required: true, message: 'Please input Activity name'},
],
}
},
methods: {

}
})

https://jsfiddle.net/wuophbfz/

Answer 1

您可以使用名为rules的computed属性来响应动态规则，就像您想要的那样：

computed: {
rules() {
const isRequired = this.MainForm.mycheckbox === false;
return {
value1: [
{ required: isRequired, message: 'Please input Activity name'},
],
value2: [
{ required: isRequired, message: 'Please input Activity name'},
],
}
}
}