Vue中多组Radio输入框选中值异常问题求助

Hey there! I’ve wrestled with exactly this kind of radio button quirk in Vue projects before, so let’s break down how to get those select and range-type poll questions working properly.

First, let’s recap the core issue: when rendering multiple groups of radio buttons (one per poll question), selecting an option doesn’t update the UI to show it as checked. This almost always boils down to how you’re binding v-model and structuring your data.

Common Culprits & Fixes #

1. You’re sharing a single v-model across all question groups #

This is the most frequent mistake. If every radio button in every question binds to the same variable (like selectedValue), Vue can’t track which question’s selection belongs to which group.

Fix: Structure your poll questions as an array of objects, where each object holds its own selected value. For example:

// Your component's data
data() {
  return {
    pollQuestions: [
      {
        id: 1,
        type: "select",
        title: "Which framework do you prefer?",
        options: ["Vue", "React", "Angular"],
        selected: null // Unique per question
      },
      {
        id: 2,
        type: "range",
        title: "Rate this feature (1-5)",
        maxScore: 5,
        selectedScore: null // Unique per question
      }
    ]
  };
}

2. Mismatched value types between v-model and radio buttons #

For range-type questions (1-5 scores), if your v-model is bound to a number but your radio button’s value is a string, Vue won’t recognize the match (since 1 !== "1"). This makes it look like the option isn’t selected, even though the data might be updating.

Fix: Use binding for the value prop to ensure type consistency. For example:

<!-- Range-type question rendering -->
<div v-for="question in pollQuestions" :key="question.id" v-if="question.type === 'range'">
  <h4>{{ question.title }}</h4>
  <div v-for="score in question.maxScore" :key="score">
    <input
      type="radio"
      :id="`q${question.id}-score${score}`"
      :name="`question-${question.id}`"
      v-model="question.selectedScore"
      :value="score" <!-- This binds a NUMBER, not a string -->
    />
    <label :for="`q${question.id}-score${score}`">{{ score }}</label>
  </div>
</div>

3. Missing or duplicate name attributes (or key values) #

While Vue primarily uses v-model to group radio buttons, the native browser behavior still relies on matching name attributes to enforce single selection per group. Also, using non-unique key values in v-for can cause Vue to reuse DOM elements incorrectly, leading to odd selection behavior.

Fix: For each question group:

• Set the name attribute to a unique value tied to the question (like question-${question.id})
• Use a unique key in both your question loop and option loop (question ID, option index/value)

Here’s a full example for select-type questions:

<!-- Select-type question rendering -->
<div v-for="question in pollQuestions" :key="question.id" v-if="question.type === 'select'">
  <h4>{{ question.title }}</h4>
  <div v-for="(option, index) in question.options" :key="index">
    <input
      type="radio"
      :id="`q${question.id}-opt${index}`"
      :name="`question-${question.id}`"
      v-model="question.selected"
      :value="option"
    />
    <label :for="`q${question.id}-opt${index}`">{{ option }}</label>
  </div>
</div>

Quick Troubleshooting Checklist #

• Each question group has its own dedicated v-model property
• Radio button value types match the v-model variable type (number ↔ number, string ↔ string)
• name attributes are identical within a question group, unique across groups
• All v-for loops use unique key values

Once you adjust these points, your radio buttons should start updating correctly. If you hit edge cases (like dynamically adding/removing questions), feel free to share a code snippet and we can refine further!

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