Is that possible to use vuelidate with q-input inside the q-table



  • As you know, it is easy to use vuelidate to validate flat structure. For example:

    data () {
      return {
        purOrd: {
          header: {    
            vendor: ''
          },
          items: [
            { material: '' },
            { material: '' }
          ]
        }
      }
    }
    // vuelidate check
    validations: {
      purOrd: {
        header: {
          vendor: { required }
        },
        items: {
          required,
          $each: {
            material: { required }
          }
        }
      }
    }
    // it is easy to check header data
    <q-input v-model="purOrd.header.vendor"
         stack-label="vendor"
         @blur="$v.purOrd.header.vendor.$touch"
         :error="$v.purOrd.header.vendor.$error" />
    
    // but how to check item data
    <q-table :data="purOrd.items">
      <q-tr slot="body" slot-scope="props" :props="props">
        <q-td key="material" :props="props">
            <q-input :value="props.row.material"
                @blur="$v.??.$touch"
                :error="$v.??.$error" />
    

    What is the correct syntax to write @blue and :error?
    Thanks a lot for your help!