So i have a table and inside table i have tr's with a v-for loop

it looks something like this:

<tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center">
  <td>{{index   1}}.</td>
  <td class="">
    <div class="flex items-center itemContainer">
      <textarea @focusout="checkInput('barcode',index)"
                v-model="item.barcode"
                id="" cols="15" rows="2" class="text-center item-box trigger">
      </textarea>
      <span class="tooltip">
        test123
      </span>
    </div>
  </td>
  <td class="px-3">
    <div class="flex items-center py-0.5 itemContainer">
      <textarea @focusout="checkInput('product_name',index)"
                v-model="item.product_name"
               id="" cols="26" rows="2" class="text-sm text-center item-box trigger">
      </textarea>
      <span class="tooltip" style="left: 5px;">
        test123
      </span>
    </div>
  </td>
</tr>

now I am trying to validate the input on focus out with this function: (i have this function called on the first two textarea in above code)

checkInput(name, itemIndex){
  if(this.documentItems[itemIndex].name == ""){
    this.errors[itemIndex].name.push("To polje je obvezno.");
  };
  console.log(this.errors);
},

the problem here is that when I call this.documentItems[itemIndex].name it looks into the documentItems name and not the function parameter name. So it outputs this error

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'name')"

how could I fix this?

CodePudding user response：

Try like following this.documentItems[itemIndex][name] :

new Vue({
  el: '#demo',
  data() {
    return {
      documentItems: [{id: 1, barcode: 99, product_name: 'aaa'}],
      errors: []
    }
  },
  methods: {
    checkInput(name, itemIndex){
    console.log(this.documentItems[itemIndex])
      if(this.documentItems[itemIndex][name] == ""){
        this.errors.push(name, "To polje je obvezno.");
      };
      console.log(this.errors);
    },
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table>
<tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center">
  <td>{{index   1}}.</td>
  <td class="">
    <div class="flex items-center itemContainer">
      <textarea @focusout="checkInput('barcode', index)"
                v-model="item.barcode"
                id="" cols="15" rows="2" class="text-center item-box trigger">
      </textarea>
      <span class="tooltip">
        test123
      </span>
    </div>
  </td>
  <td class="px-3">
    <div class="flex items-center py-0.5 itemContainer">
      <textarea @focusout="checkInput('product_name', index)"
                v-model="item.product_name"
               id="" cols="26" rows="2" class="text-sm text-center item-box trigger">
      </textarea>
      <span class="tooltip" style="left: 5px;">
        test123
      </span>
    </div>
  </td>
</tr>
</table>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just remove all [index] in your v-model first like this:

<tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center">
  <td>{{index   1}}.</td>
  <td class="">
    <div class="flex items-center itemContainer">
      <textarea @focusout="checkInput(barcode, index)" v-model="documentItems.barcode" id="" cols="15" rows="2" class="text-center item-box trigger"></textarea>
      <span class="tooltip">
        test123
      </span>
    </div>
  </td>
  <td class="px-3">
    <div class="flex items-center py-0.5 itemContainer">
      <textarea @focusout="checkInput(product_name, index)" v-model="documentItems.product_name" id="" cols="26" rows="2" class="text-sm text-center item-box trigger"></textarea>
      <span class="tooltip" style="left: 5px;">
        test123
      </span>
    </div>
  </td>
</tr>

and than update your script like this:

checkInput(name, itemIndex){
  console.log(itemIndex); //You don't need this parameter
  if(this.documentItems.name == ""){
    this.errors.name.push("To polje je obvezno.");
  };
  console.log(this.errors);
},

Could not test it out right now, but it should work like this.. give me short feedback if this works for you..