validate inputs on focusout vuejs

Question

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

it looks something like this:


  {{index + 1}}.
  
    
            
      
        test123
      
    
  
  
    
            
      
        test123

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?

user_11989189 · Answer

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





  {{index + 1}}.
  
    
            
      
        test123
      
    
  
  
    
            
      
        test123

user_16365685 · Answer

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


  {{index + 1}}.
  
    
      
      
        test123
      
    
  
  
    
      
      
        test123

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..

validate inputs on focusout vuejs

2 Answers