使用Vue.js和element 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>

App.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'},
          ],
        }
    }
}