Vue.js 第二个单选按钮在应用加载时被选中

Question

I have the following Quiz written using Vue.js where everything works like a charm...

except one thing, which I can't find a solution, is it my code causing this bug? or I need approach it differently?

Update: now that I have added unique names for each element, as one of the answers suggest, The second menu item is always selected by default on page load... any hint on how to overcome this issue?

<script>

    // Create a quiz object with a title and two questions.
// A question has one or more answer, and one or more is valid.
var quiz = {
   "title":"Quizorama",
   "questions":[
      {
         "text":"Lalala",
         "audio":"TextTo-1-1.mp3",
         "responses":[
            {
               "text":"Incorrect"
            },
            {
               "text":"Incorrect"
            },
            {
               "text":"Correct",
               "correct":true
            }
         ]
      },
      {
         "text":"Something",
         "audio":"57633709.mp3",
         "responses":[
            {
               "text":"Correct",
               "correct":true
            },
            {
               "text":"Incorrect"
            },
            {
               "text":"Incorrect"
            }
         ]
      },
      {
         "text":"Question",
         "audio":"57633709.mp3",
         "responses":[
            {
               "text":"Correct",
               "correct":true
            },
            {
               "text":"Incorrect"
            },
            {
               "text":"Incorrect"
            }
         ]
      }
   ]
};


</script>


<div class="wrapper" id="page-wrapper">

    <div class="centered-content " id="content" tabindex="-1">

        <div class="row">
            <main class="site-main" id="main">


  <div id="app">
  <h1>{{ quiz.title }}</h1>
  <!-- index is used to check with current question index -->
  <div v-for="(question, index) in quiz.questions">
    <!-- Hide all questions, show only the one with index === to current question index -->
     <transition name="slide-fade"> 
    <div v-show="index === questionIndex">
      <h2>{{ question.text }}</h2>
      <audio width="450" controls :src="question.audio"></audio>

      <ul>
    <li v-for="response in question.responses" 
        v-bind:correctOrNot="response.correct"
        v-bind:class="{ active: isActive }">
      <label>
             <input type="radio" 
               v-bind:value="checkResponse(response.correct)"  
               v-bind:name="nameMethod(index ,response.text, 
               questionIndex)" 
               v-model="userResponses[index]"
               > {{response.text}}
               
      </label>
    </li>
</ul>
      <!-- The two navigation buttons -->
      <!-- Note: prev is hidden on first question -->
      <!-- <button v-if="questionIndex > 0" v-on:click="prev">
        otra oportunidad?
      </button> -->
      <button v-on:click="next">
            Next pleeeeease!
          </button>

    </div>
 </transition>

  </div>
  <transition name="slide-fade"> 

  <div v-show="questionIndex === quiz.questions.length">
    <h3>
yer results are da following bro:
</h3>
    <p class="puntaje">
     {{ score() }} 
    </p>


  </div>
  </transition> 

</div>

<script>


      
new Vue({
  el: '#app',

  data: {
    quiz: quiz,
    // Store current question index
    questionIndex: 0,
    // An array initialized with "false" values for each question
    // It means: "did the user answered correctly to the question n?" "no".
    userResponses: Array(quiz.questions.length).fill(false),
    isActive: false,
   
  },

  // The view will trigger these methods on click
  methods: {


checkResponse: function(response){
  let checkResponseValue = response; 
  if (response == true){
    return true;
  } else {
    return false;
  }
},
nameMethod: function(index, responseText, questionIndex){
  var index = index;
  var questionIndexValue = questionIndex
  var responseText = responseText;
  var name = index + responseText+'_'+ questionIndexValue;
  return name;
},

    next: function() {    
      
      console.log(this);

      this.isActive = true;

      setTimeout(() => {
        // move to next question 
       this.questionIndex++;

       this.isActive = false;

      }, 3000);

    },

    updateMessage: function () {
      this.message = 'updated';
      },
    
    // Go to previous question
    prev: function() {
      this.questionIndex--;
    },
    editModal: function(id){
        console.log(id);
    },

    // Return "true" count in userResponses
    score: function() {
     let scorePercent = Math.round(this.userResponses.filter(function(val) { return val }).length * 100 / this.questionIndex);
     let newResult;
    
     if(scorePercent == 0 ){
      newResult =  "you suck , not even one good response mate ";
      return newResult
     }

     if(scorePercent < 30){
      newResult = scorePercent + "% Was Good, so you need to practice more mate";
      return newResult
     }

     if(scorePercent < 70){
      newResult =  scorePercent + "% yar a ducking star but there is more to improve";
      return newResult
     }

     if(scorePercent == 100){
      newResult = scorePercent + "% you are a godlike creature made flesh";
      return newResult
     }
     
      }

  }


});

</script>


<style>

p.puntaje {
    font-size: 25px;
    color: #333333;
    margin-bottom: 40px;
    background: #fce373;
    padding: 13px;
    border-radius: 100px;
    text-align: center;
}

main#main {
    margin: auto;
}
#app h1 {
    font-size: 66px;
    font-weight: 900;
    color: #b1b1b1;
}

#app h2 {
    font-size: 125px;
    color: #a282bb;
}

#app ul {
    list-style: none;
    padding: 0;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all 0.5s ease;
  transition-delay: 2s;

}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
  transition: all 0.5s ease;


}
#app button {
    background: #00BCD4;
    width: 200px;
    margin-bottom: 30px;
    border-radius: 100px;
    font-size: 17px !important;
    padding: 7px 17px;
    border: none;
}
#app li label {
    font-size: 25px;
    background: #fff2b6;
    border-radius: 100px;
    padding-left: 17px;
    padding-right: 17px;
    margin-top: 16px;
    padding-top: 5px;
    transition: all 0.5s ease;
}

#app li label:hover{
background: #fce372;
cursor:pointer;
transition: all 0.5s ease;

}

li.active label {
    background: #ee734c !important;  transition: all 0.5s ease;

}
li[correctOrNot="true"].active label {
  background: #9ad18b !important;  transition: all 0.5s ease;

}

.slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(50px);
  opacity: 0;
  transition: all 0.5s ease;

}
</style>

Answer 1

This is a simple HTML problem. You define the radio buttons with the response.correct value, which is undefined for the incorrect options and also identical for both (no matter if it is null or false).

Your output might be like this:

<input type="radio" name="index">Incorrect
<input type="radio" name="index">Incorrect
<input type="radio" name="index" value="true">Correct

If you have a group of radio buttons and several have the same value (or none), these are basical the same input. Try to define a unique value for each radio button with the same name.