title: Using Vue.js and element UI, How to make required field optional depend on checkbox value?
body: <p>I'm using element UI library in Vue.js project, Both input fields are required. How to make first field not-required after click on checkbox?</p>
  
  <p>The template : </p>
  
  <pre><code>&lt;el-form :model="MainForm.dynamicValidateForm" ref="MainForm" class="demo-dynamic" :rules="rules" :inline-message='false'&gt;
  
       &lt;el-form-item label="label-1" prop="value1"&gt;
             &lt;el-input v-model="MainForm.value1" &gt;&lt;/el-input&gt;
        &lt;el-form-item&gt;    
  
      &lt;el-form-item label="label-2" prop="value2"&gt;
           &lt;el-input v-model="MainForm.value2" &gt;&lt;/el-input&gt;
      &lt;el-form-item&gt;
  
      &lt;el-form-item&gt;
          &lt;el-checkbox v-model="MainForm.mycheckbox"&gt;Make first optional&lt;/el-checkbox&gt;
      &lt;/el-form-item&gt;      
  
  &lt;/el-form&gt;
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>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: {
  
  
          }
  
  })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/wuophbfz/" rel="nofollow noreferrer">https://jsfiddle.net/wuophbfz/</a></p>