Vue测验项目列表渲染重复问题求助：选项重复显示

问题1：选项重复显示'B.3'的原因 #

你的data选项写法存在语法错误——return只能返回一个对象，但你拆成了多个独立对象，导致除第一个对象的nama和show外，后面的jawaban定义全被忽略了。另外你也没把选项放进数组里，v-for自然没法正确遍历多个选项。

修正后的完整代码 #

下面是修复了选项渲染问题，并实现了正确选项加分功能的代码：

<template>
  <div class="hello">
    <h1 v-if="show">hai</h1>
    <h1 v-else>hehe</h1>
    <p>{{ nama}}</p>
    <input type="text" v-model="nama">
    <button type="button" v-on:click="hideTitle">Click Me</button>
    
    <!-- 测验题目 -->
    <h3>1. Yang Dipakai Di sepatu adalah</h3>
    <!-- 选项组：用name属性让单选按钮分组，v-model绑定选中的选项 -->
    <div v-for="(option, index) in jawaban" :key="index">
      <input 
        type="radio" 
        :name="quizGroup" 
        :value="option"
        v-model="selectedOption"
        @change="checkAnswer"
      >
      {{ option.jawaban }}
    </div>
    <!-- 显示当前分数 -->
    <p>当前分数：{{ score }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data: function() {
    return {
      nama: 'Luthfi',
      show: true,
      // 将选项改为数组，每个元素包含选项文本和是否正确的标记
      jawaban: [
        { jawaban: 'A.2', correct: true },
        { jawaban: 'B.3', correct: false },
        { jawaban: 'C.4', correct: false },
        { jawaban: 'D.x', correct: false }
      ],
      selectedOption: null, // 存储用户选中的选项
      score: 0, // 初始分数
      quizGroup: 'shoeQuiz' // 单选按钮的name属性，用于分组确保单选
    }
  },
  methods: {
    hideTitle() {
      this.show = !this.show
    },
    // 检查答案并加分的方法
    checkAnswer() {
      // 避免重复加分：判断选中选项正确且未加过分
      if (this.selectedOption.correct && !this.selectedOption.scored) {
        this.score += 10; // 每次正确加10分，可自行调整分值
        this.selectedOption.scored = true; // 标记该选项已加分
      }
    }
  },
  mounted: function () {
    this.nama = 'Fitra'
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
/* 给选项加一点间距，更美观 */
div {
  margin: 8px 0;
}
</style>

关键修改点说明 #

1. 修正data结构：

   • 把jawaban改成数组，每个元素是包含jawaban（选项文本）和correct（是否正确）的对象，让v-for能正确遍历所有选项。
   • 新增selectedOption存储用户选中的选项、score记录分数、quizGroup作为单选按钮的分组标识，确保同一题目只能选一个选项。

2. 修复选项渲染：

   • v-for遍历jawaban数组时添加:key="index"，帮助Vue正确跟踪每个选项的状态。
   • 给单选按钮绑定:name="quizGroup"实现分组，:value="option"把整个选项对象作为选中值，v-model="selectedOption"实时同步用户选择。

3. 实现加分功能：

   • 添加checkAnswer方法，通过@change事件在用户切换选项时触发。
   • 加入scored标记避免重复加分——用户多次点击同一正确选项不会重复累计分数。

额外提示 #

如果后续要扩展多道题目，可以把题目和选项做成二维数组，用嵌套v-for遍历，扩展性会更强；分值也可以根据题目难度灵活调整。

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