Suggest a new feature

[Jonathan Olier]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Hi there,

I am currently developing a ratio group-buttons component in Vue 3, and I've observed a requirement in rendering the HTML: it necessitates the presence of two elements. However, as I aim to dynamically populate these elements from a service, I find myself compelled to utilize the v-for directive. Unfortunately, this directive prohibits the consecutive use of two elements. Hence, I must resort to enclosing each pair of elements within a container, such as a div. Allow me to illustrate this with an example:

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>

instead of

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <div v-for="size in Sizes" :key="size">
    <input type="radio" class="btn-check" name="btnradio" :id="`btnradio-${size}`" autocomplete="off" :checked="size === 1">
    <label class="btn btn-outline-primary" :for="`btnradio-${size}`">{{ size }}</label>
   </div>
</div>

In my particular scenario, the concern arises when the buttons lose their responsive design, necessitating the addition of ad-hoc classes in an attempt to maintain the original styling.

Original Style The style with v-for directive

Motivation and context

This change is useful because it allows us to dynamically generate the radio button elements based on the data. It enables us to iterate over an array of any data and create corresponding radio buttons without needing to hardcode each button individually in the template.

However, as you've noted, this change can affect the responsiveness and styling of buttons, as it alters the structure of the HTML compared to the original static version. By wrapping each pair of radio button elements in a container div, I'm introducing additional div elements into the DOM, which can potentially affect the layout and styling, especially if the CSS relies on specific parent-child relationships or if there are styles targeting direct sibling elements.

To mitigate this issue, I consider may need to adjust the CSS to accommodate the new structure introduced by the container divs or any other parent or structure that you considere better. This could involve tweaking existing styles or adding new styles specifically targeting the container divs and their children to ensure that the responsive design is maintained and that the buttons retain their original appearance across different screen sizes.

Overall, while this change is necessary for dynamic data rendering in Vue, it's important to be mindful of its potential impact on styling and responsiveness and to make corresponding adjustments to CSS as needed to ensure a consistent and visually appealing of UX.