How to pass a Boolean value in props ? in vue3

Question

Hello guys im using vuelidate for validating the input

this.v$.error 

this piece of code contain a Boolean whether it is valid input or not i wanna pass this Boolean value on my Components props

this is my components code

<template>
    <div class="form-floating mb-3">
        <input  
        class="form-control"
        :class="[error ? 'is-invalid' : 'is-valid']"
        required
        >

        <div class="valid-feedback">
        Valid input
        </div>

        <div class="invalid-feedback">
         Invalid input
        </div>

     
    </div> 
</template>
<script>
export default ({
    props: {
        error:{
            type: Boolean
        }
    }

})
</script>

and I wanna pass a Boolean value

<Textfield error="this.v$.error" />

and apparently it does not work

can you guys please explain me why it wont work and please show proper code ?

i am new to vue3 framework it likes

Thank you!

Answer 1

In your component:

<template>
  <div class="form-floating mb-3">
    <input
      class="form-control"
      :class="[error ? 'is-invalid' : 'is-valid']"
      required
    />
    <div class="valid-feedback">Valid input</div>
    <div class="invalid-feedback">Invalid input</div>
  </div>
</template>

<script setup>
const props = defineProps({
  error: {
    type: Boolean,
  },
});
</script>

In parent component:

<template>
...
    <Textfield error="error" />
...
</template>

<script>
...
const error = this.$v.error;
...
</script>