title: how to make function to validate inputs in dynamic table in vue js
body: <p>I have dynamic table in vue Js, I have created validation function to validate inputs and inputs from dynamic table, the validation function is working ok for all inputs unless dynamic table inputs, The validation functions gives always the same messages  <strong>top interval is empty</strong>, <strong>bottom interval is empty</strong> in both case if we fill the dynamic table inputs or keep them empty inputs.
  I want any function to validate inputs inside dynamic table.</p>
  <p>HTML</p>
  <pre><code> &lt;v-form lazy-validation ref=&quot;form&quot;&gt;
        
  &lt;v-row&gt;
     &lt;v-col md=&quot;6&quot;&gt;
         &lt;v-text-field class=&quot;pa-1&quot; label=&quot;wallNumber&quot; @keyup=&quot;uppercase&quot; required v-model=&quot;wallNumber&quot;  maxlength=4 v-on:keypress=&quot;isLetter($event)&quot;&gt;&lt;/v-text-field&gt;
      &lt;/v-col&gt;
    &lt;v-col md=&quot;6&quot;&gt;
         &lt;v-text-field class=&quot;pa-1&quot; label=&quot;Name abbreviation&quot; @keyup=&quot;uppercase&quot; required v-model=&quot;name&quot;  maxlength=4 v-on:keypress=&quot;isLetter($event)&quot;&gt;&lt;/v-text-field&gt;
      &lt;/v-col&gt;
  &lt;/v-row&gt;
  
  &lt;table class=&quot;responsive-table&quot;&gt;
      &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope =&quot;col&quot;&gt;#&lt;/th&gt;
        &lt;th class=&quot;text-left&quot;&gt;Top Interval&lt;/th&gt;
        &lt;th class=&quot;text-left&quot;&gt;Base Interval &lt;/th&gt;
        &lt;th class=&quot;text-left&quot; &gt;Summary&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr v-for=&quot;(chemo, index) in chemoTable&quot; :key=&quot;index&quot;&gt;
        &lt;td scope=&quot;row&quot; class=&quot;trashIconContainer&quot;&gt;
          &lt;i class=&quot;far fa-trash-alt&quot; @click=&quot;deleteChemoRow(index, chemoTable)&quot;&gt;&lt;/i&gt;
        &lt;/td&gt;
        &lt;td&gt; 
         
          &lt;input  v-model=&quot;chemo.topInterval&quot;  class=&quot;form-control&quot; type=&quot;number&quot;/&gt;
           
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input v-model=&quot;chemo.bottomInterval&quot; class=&quot;form-control&quot; type=&quot;number&quot;   /&gt;
        &lt;/td
        
        &lt;td &gt;
           &lt;v-textarea value=&quot;&quot; v-model=&quot;chemo.summary&quot; class=&quot;pa-1&quot; label= &quot;Enter summary asfree text.&quot; cols=&quot;1900&quot; &gt;
           &lt;/v-textarea&gt;
        &lt;/td&gt;
       
      
      &lt;/tr&gt;
      &lt;/tbody&gt;
  
    &lt;/table &gt; 
  
  &lt;v-col&gt;
              &lt;v-btn type ='submit' width=&quot;100%&quot; class=&quot;primary&quot;  :loading=&quot;isPdfGenerating&quot; @click=&quot;generateReport(true)&quot;&gt;Generate report&lt;/v-btn&gt;
  &lt;/v-col&gt;
  </code></pre>
  <p>java script</p>
  <pre><code>export default {
  
      name: 'chemoOperations',
       
      data: () =&gt; ({
  name: null,
  chemoTable: [{ topChemoZone: '', bottomChemoZone: '', chemoZoneName: '',}]
  })
  methods:{
   validateForm: function (chemozone,e) {
        if (this.name &amp;&amp; this.wallnumber) {
    
          return true;
         
         }
    
  
        this.errors = [];
  
         if (!this.name) {
          this.errors.push('Name abbreviation')
        }
        
        if (!this.wallNumber) {
          this.errors.push('Wall Number')
        }
  
        
   for (chemozone in this.chemoTable){
  
           if (!chemozone.topInterval){
             this.errors.push('top interval is empty')}
  
        if (!chemozone.bottomInterval){
             this.errors.push('bottom interval is empty')}
  }
  
  if (this.errors.length)
        
  
        {  
          this.$alert (&quot;The following items should not be empty: &quot; +this.errors.join(&quot;, &quot;))
  
        }
  
  
      e.preventDefault(e);
  
  generateReport: function (chemozone,isDraft=true) {
          
  
           
            this.validateForm()
            this.$emit('pdfGenerated', null)
            this.isPdfGenerating = true
            this.isPdfGenerated = false
            let jsonData = {
             name:this.name, 
             wallNumber:this.wallNumber,
             lateralNumber:this.lateralNumber,
             topInterval:this.topInterval,
             bottomInterval:this.bottomInterval,
              }
  })
  
  
  
  </code></pre>