[v3] Getting error props down a slot

[gregorvoinov]

Hi,

I have a component to wrap all the validation logic, but I can't push the error through the slot. But somehow theFormError works...

//formrow
<template>
  <div class="mb-4">
    <v-validation-provider
      v-slot="{ errors }"
      :rules="validate"
    >
      <label>{{ label }}</label>
      <slot 
        :onInput="onInput" 
        :error="errors.length ? true : false" //this doesn't work
      />
      <vFormError
        :errors="errors" //works my error message gets displayed
      />
    </v-validation-provider>
  </div>
</template>
<script>
import { ValidationProvider as vValidationProvider } from 'vee-validate'
import vTextfield from '@primitives/textfield'
export default {
  components: {
    vTextfield,
    vFormError,
    vValidationProvider
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    validate: {
      type: String,
      required: true,
    }
  },
}
</script>

//textfield
<template>
  <div>
    <input @input="onInput"/>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    error: {
      type: Boolean,
      default: false //doesn't get updated
    }
  },
  data: {
  }
  methods: {
    onInput(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

//form
<vFormRow validate="required" v-slot="{ onInput }">
  <vTextfield @input="onInput"/>
</vFormRow>

Why does error don't go through the slot?

And is there also a way to avoid the v-slot="{ onInput }" @input="onInput" in the form?

I'm using "vee-validate": "^3.4.5" & "vue": "^2.6.12",

[logaretm]

You didn't pass the error prop to the <TextField> node, you should the same like you did with onInput:

<vFormRow validate="required" v-slot="{ onInput, error }">
  <vTextfield @input="onInput" :error="error" />
</vFormRow>

[gregorvoinov]

oh thank does work ;)

But is there also a way to avoid the v-slot? Do it somehow with provide/inject?

[logaretm]

Unfortunately no, the Vue 2 API doesn't really provide a way to do that from the template but in V4 with the composition API it is very straightforward

[gregorvoinov]

ok thanks for clarifying.