I have a form component that looks like this:
<form-component>
<text-component name="test1" />
<select-component name="test2" />
</form-component>
I need the FormComponent to apply a wrapper div around each child
From the above code, the output of FormComponent should be like this:
<form>
<div class="mb-3">
<text-component name="test1" />
</div>
<div class="mb-3">
<select-component name="test2" />
</div>
</form>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Here is a workaround:
const formChildren = [{ name: 'test1', is: TextComponent }, { name: 'test2', is: SelectComponent }]FormComponent.vue
<template> <form> <div v-for="(child, index) in children" :key="index" class="mb-3" > <component v-bind="child" /> </div> </form> </template> <script setup> defineProps(['children']) </script>This is a working demo as you suggested in the comments, looping over the contents of
$slots.default().If you prefer writing your logic in template syntax, that's the right way to go, and I don't see anything wrong with that.
I personally prefer the first approach, as my tendency is to (usually) keep template syntax to a minimum. Keeping components in an object or map structure allows me to have fine control and automate tasks such as:
My preference probably comes from working a lot in configuration-driven environments where business logic is typically stored in objects. There's nothing wrong with writing it in template syntax, but overall I find it limiting.