使用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>

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

您可以使用名为computed的{​​{1}}属性来使动态规则具有反应性：

rules