如何在 props 中传递布尔值？在 vue3 中

Question

大家好，我正在使用 vuelidate 来验证输入

this.v$.error

这段代码包含一个布尔值是否是有效输入我想在我的组件道具上传递这个布尔值

这是我的组件代码

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

我想传递一个布尔值

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

显然它不起作用

你们能解释一下为什么它不起作用吗？请显示正确的代码？

我是vue3框架的新手它喜欢

谢谢！

Answer 1

在你的组件中：

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

在父组件中：

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

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

如何在 props 中传递布尔值？在 vue3 中

How to pass a Boolean value in props ? in vue3

vuelidate

vuejs3