Vue评分组件如何实现input与label的交替顺序渲染？

问题 #

我正在学习Vue并制作评分组件，需要实现<input>与<label>逐个交替排列的效果（即<input>、<label>依次循环展示）。但当前代码会先渲染所有<input>标签，再渲染所有<label>标签；尝试用<div>包裹每组<input>和<label>后，出现了额外的半星且组件功能异常，请问如何实现目标的交替渲染效果？

原代码 #

<script setup>
  const stars = [
    { id: "star5", value: 5 },
    { id: "star4.5", value: 4.5 },
    { id: "star4", value: 4 },
    { id: "star3.5", value: 3.5 },
    { id: "star3", value: 3 },
    { id: "star2.5", value: 2.5 },
    { id: "star2", value: 2 },
    { id: "star1.5", value: 1.5 },
    { id: "star1", value: 1 },
    { id: "star0.5", value: 0.5 },
  ];
</script>

<template>
  <div class="center">
    <div class="rating">
      <input
        type="radio"
        v-for="star in stars"
        :key="star.value"
        :id="star.id"
        :name="'rating'"
        :value="star.value"
      />
      <label
        v-for="star in stars"
        :key="star.value"
        :for="star.id"
        :class="[star.value % 1 === 0 ? 'full' : 'half']"
      ></label>
    </div>
  </div>
</template>

尝试修改后的代码 #

<div class="center">
    <fieldset class="rating">
      <div v-for="star in stars" :key="star.id">
        <input type="radio" :id="star.id" :name="'rating'" :value="star.value" />
        <label :for="star.id" :class="[star.value % 1 === 0 ? 'full' : 'half']"></label>
      </div>
    </fieldset>
  </div>

解决方案 #

要实现<input>和<label>逐个交替排列，无需额外用<div>包裹每组元素，只需把两个独立的v-for合并成一个循环，在同一循环内依次渲染<input>和<label>即可，同时用<template>作为循环容器（不会生成冗余DOM节点），避免布局和功能异常。

修正后的完整代码 #

<script setup>
const stars = [
  { id: "star5", value: 5 },
  { id: "star4.5", value: 4.5 },
  { id: "star4", value: 4 },
  { id: "star3.5", value: 3.5 },
  { id: "star3", value: 3 },
  { id: "star2.5", value: 2.5 },
  { id: "star2", value: 2 },
  { id: "star1.5", value: 1.5 },
  { id: "star1", value: 1 },
  { id: "star0.5", value: 0.5 },
];
</script>

<template>
  <div class="center">
    <div class="rating">
      <template v-for="star in stars" :key="star.id">
        <input
          type="radio"
          :id="star.id"
          name="rating"
          :value="star.value"
        />
        <label
          :for="star.id"
          :class="[star.value % 1 === 0 ? 'full' : 'half']"
        ></label>
      </template>
    </div>
  </div>
</template>

关键优化点 #

• 合并循环：将原本两个独立的v-for合并到同一个<template>循环中，确保每一组<input>和<label>按顺序交替渲染。
• 避免冗余DOM：用<template>作为循环容器，不会生成额外的<div>等节点，避免破坏评分组件的布局逻辑。
• 简化属性绑定：name属性为固定值，无需用:name="'rating'"，直接写name="rating"即可。

内容的提问来源于stack exchange，提问作者user20743167