Vue: Swappable dynamic component not render anything inside of itself

user_13613056 0
Viewed 133

I have a v-for and I used <component :is=""> in it, when it's render ValidationProvider, everything is right but when it render span it doesn't render anything inside.

<component
 :is="item.validation_rules ? 'ValidationProvider' : 'span'"
 v-slot="{ errors }"
 :name="item.label"
 :rules="item.validation_rules"
>
 Place for inputs...
</component>

output:

<span name="Field name" rules=""></span>

Exepted output:

<span name="Field name" rules="">
  Place for inputs...
</span>
vee-validate vue.js
1 Answers

If I'm not mistaken, you can only render a "component", hence span is a simple HTML tag. I don't have any official source confirming that tho.

Oh and you also have some flexibility with vee-validate and the Validation Provider, as seen here: https://vee-validate.logaretm.com/v3/api/validation-provider.html#rendering
You can pass a tag="span", not sure if it can help you somehow.

user_88165850
Related