Vue.js中v-for遍历JSON数据时按单个字符循环异常问题求解

接口返回的choice_data字段不是可遍历的数组，是未序列化的JSON字符串。v-for遍历字符串时默认会拆分为单个字符，因此才会生成和字符串长度匹配的多余单字符选项。
同时你的代码还有3处关联问题需要同步修复：

• template中绑定的字段名是imageId，但接口返回的choice_data里字段为imgId，字段不匹配会导致渲染的选项标签、值为空
• data中questions初始值设为了空字符串，初始加载时访问questions[questionIndex]会报错
• 请求URL拼接少了=符号，会导致参数传递错误
• v-model绑定的radioGroup变量没有在data中声明，会触发控制台警告

1. 修改data初始值 #

data () {
  return {
    examId: '',
    questions: [], // 从空字符串改为空数组
    questionIndex: 0,
    radioGroup: null // 补充声明radioGroup变量
  }
}

2. 修正loadQuestions方法，解析choice_data为数组 #

async loadQuestions() {
  let self = this
  // 补全URL的=符号
  await axios.get('http://localhost:5000/examination/get-questions?id='+this.examId)
  .then(function (response) {
    // 遍历解析每个问题的choice_data字段
    self.questions = response.data.map(item => {
      // 加异常捕获避免choice_data格式错误导致页面崩溃
      try {
        item.choice_data = JSON.parse(item.choice_data)
      } catch(e) {
        item.choice_data = []
        console.error('选项格式解析失败', e)
      }
      return item
    })
  })
}

3. 修正template中v-radio的字段绑定 #

<v-radio
  v-for="image in questions[questionIndex].choice_data"
  :key="image.imgId"
  :label="image.name"
  :value="image.imgId"
></v-radio>

内容的提问来源于stack exchange，提问作者VIJITH V S