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

我使用Vue.js编写了以下测验，其中所有内容都像一个符咒一样工作

除了一件事我找不到解决办法， 是我的代码导致了这个错误吗？还是我需要换一种方式

更新：现在我已经为每个元素添加了唯一的名称，正如其中一个答案所建议的，第二个菜单项总是在页面加载时默认选中。。。有没有关于如何克服这个问题的提示

<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>

//创建一个带有标题和两个问题的测验对象。
//一个问题有一个或多个答案，一个或多个答案是有效的。
变量测验={
“标题”：“Quizorama”，
“问题”：[
{
“文本”：“拉拉”，
“音频”：“TextTo-1-1.mp3”，
“答复”：[
{
“文本”：“不正确”
},
{
“文本”：“不正确”
},
{
“文本”：“正确”，
“正确”：正确
}
]
},
{
“文本”：“某物”，
“音频”：“57633709.mp3”，
“答复”：[
{
“文本”：“正确”，
“正确”：正确
},
{
“文本”：“不正确”
},
{
“文本”：“不正确”
}
]
},
{
“案文”：“问题”，
“音频”：“57633709.mp3”，
“答复”：[
{
“文本”：“正确”，
“正确”：正确
},
{
“文本”：“不正确”
},
{
“文本”：“不正确”
}
]
}
]
};
{{quick.title}
{{question.text}


{{response.text}


下一个请！
您的结果如下所示：

{{score（）}}

新Vue({
el:“#应用程序”，
数据：{
小测验：小测验，
//存储当前问题索引
问题索引：0，
//为每个问题初始化为“false”值的数组
//它的意思是：“用户是否正确回答了问题n？”“否”。
userResponses:Array（测验.问题.长度）.fill（false），
I：错，
},
//视图将在单击时触发这些方法
方法：{
checkResponse：函数（响应）{
让checkResponseValue=响应；
如果（响应==true）{
返回true；
}否则{
返回false；
}
},
nameMethod:函数（索引、响应文本、问题索引）{
var指数=指数；
var questionIndexValue=questionIndex
var responseText=responseText；
变量名称=索引+响应文本+问题索引值；
返回名称；
},
下一步：函数（）{
console.log（this）；
this.isActive=true；
设置超时（（）=>{
//转到下一个问题
这个.questionIndex++；
this.isActive=false；
}, 3000);
},
updateMessage:函数（）{
this.message='updated'；
},
//转到上一个问题
prev:function（）{
这是一个问题索引--；
},
editModal:函数（id）{
console.log（id）；
},
//在userResponses中返回“true”计数
分数：函数（）{
让scorePercent=Math.round（this.userResponses.filter（函数（val）{return val}）.length*100/this.questionIndex）；
让新的结果；
如果（分数百分比==0）{
newResult=“你很烂，连一个好反应的伴侣都没有”；
返回新结果
}
如果（分数百分比<30）{
newResult=scorePercent+%很好，所以你需要练习更多的mate”；
返回新结果
}
如果（分数百分比<70）{
newResult=scorePercent+%y是一颗小星星，但还有很多地方需要改进；
返回新结果
}
如果（分数百分比==100）{
newResult=scorePercent+“%你是一个由血肉制成的神灵生物”；
返回新结果
}
}
}
});
p、 蓬塔耶{
字体大小：25px；
颜色：#333333；
边缘底部：40px；
背景#fce373；
填充：13px；
边界半径：100px；
文本对齐：居中；
}
main#main{
保证金：自动；
}
#app h1{
字体大小：66px；
字号：900；
颜色：#B1B1；
}
#app h2{
字号：125px；
颜色：#a282bb；
}
#应用ul{
列表样式：无；
填充：0；
}
/*进入和离开动画可以使用不同的*/
/*持续时间和计时功能*/
.幻灯片淡入激活状态{
过渡：所有0.5s缓解；
过渡延迟：2s；
}
.幻灯片淡入淡出激活状态{
过渡：所有0.5s三次贝塞尔（1.0,0.5,0.8,1.0）；
}
.滑入淡入
/*.在版本2.1.8*下滑动淡入保持活动状态*/{
转换：translateX（10px）；
不透明度：0；
过渡：所有0.5s缓解；
}
#应用程序按钮{
背景：#00BCD4；
宽度：200px；
边缘底部：30px；
边界半径：100px；
字体大小：17px！重要；
填充：7px 17px；
边界：无；
}
#应用程序li标签{
字体大小：25px；
背景#fff2b6；
边界半径：100px；
左侧填充：17px；
右边填充：17px；
边缘顶部：16px；
垫面：5px；
过渡：所有0.5s缓解；
}
#应用程序li标签：悬停{
背景#fce372；
光标：指针；
过渡：所有0.5s缓解；
}
li.活动标签{
背景：#ee734c！重要；过渡：所有0.5s轻松；
}
li[correctOrNot=“true”]。活动标签{
背景：#9ad18b！重要；过渡：所有0.5s轻松；
}
.滑离
/*.在版本2.1.8*下滑动淡入保持活动状态*/{
转换：translateX（50px）；
不透明度：0；
过渡：所有0.5s缓解；
}

这是一个简单的HTML问题。您使用

响应定义单选按钮。correct

值，对于不正确的选项和

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