json 数据被 v-for 中的每个字符错误地循环在 vue js 中，答案

【问题标题】：json Data getting looped incorrectly by each character in v-for in vue js,json 数据被 v-for 中的每个字符错误地循环在 vue js 中，
【发布时间】：2021-10-07 15:54:15
【问题描述】：

下面是我的组件模板

  <template>
    <v-card
    class="mx-auto"
    width="500"
    outlined
  ><v-list-item three-line>
      <v-list-item-content>
      <div class="text-overline mb-4">
              Exam Name
        </div>
        <v-list-item-title class="text-h5 mb-1">
        {{ questions[questionIndex].question }}
        </v-list-item-title>
        <div class="ml-3">
        <v-radio-group v-model="radioGroup">
          <v-radio
            v-for="image in questions[questionIndex].choice_data"
            :key="image.imageId"
            :label="image.name"
            :value="image.imageId"
          ></v-radio>
        </v-radio-group>
        </div>
      </v-list-item-content>
    </v-list-item>

    <v-card-actions>
      <v-btn
        outlined
        rounded
        text
        @click="getNextQuestion()"
      >
        Next
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

My component script is given below

    <script>
     import axios from 'axios'
      export default {
       name: 'examination',
        components:{
      // axios
       },
    data () {
      return {
        examId: '',
        questions: '',
        questionIndex: 0,
      }
    },
    created() {
      this.examId = new URL(location.href).searchParams.get('examId');
      this.loadQuestions()
    },
    methods: {
      async loadQuestions() {
        let options = {
          url: 'http://localhost:5000/examination/get-questions',
          method: 'GET',
          data: {
            id: this.examId,
          }
        }
        let self = this
      await axios.get(options.url+'?id'+this.examId)
      .then(function (response) {
        self.questions = response.data;
      })
      },
      getNextQuestion() {
        this.questionIndex++
      }
      }
      }
      response.data = [
{
    "id": 1,
    "question": "What is the question ?",
    "choice_data": "[{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}]",
    "score": 1,
    "topic_id": 1,
    "level": "BEGINNER"
},
{
    "id": 2,
    "question": "Second question ?",
    "choice_data": "[{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}]",
    "score": 1,
    "topic_id": 1,
    "level": "BEGINNER"
}

]

通过调用请求 API，我得到了上述响应，

我试图将名称作为 v-radio 元素中的选项获取，但不是循环遍历 JSON，而是循环遍历 JSON 中的每个字符，并且我得到的选项数量等于字符数。有人，请帮忙

【问题讨论】：

在questions 的特定索引下没有名为choice_data 的属性。你所拥有的只是{imgId: 1, name: String}，那么你希望它如何出现
抱歉，我已经更新了正确的回复。请您现在检查一下吗
你有:key="image.imageId"...不应该是:key="image.imgId" 吗？也为value 更改它
改了，还是有问题
可以附上用户界面的截图吗？

标签： json vue.js

【解决方案1】：

问题是，这个"[{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}]" 不是一个充满对象的数组，它是一个字符串。

因此，如果您尝试循环遍历一个字符串，您将获得字符串的每一部分作为循环的元素。把它想象成这样：

"[{imgId:...]" is like ["[", "{", "i", "m", "I", "d", ":" ...]

因此，要解决您的问题，您需要在response.data 中采用所需格式的choice_data（array of objects）。

例子：

{
   "id": 1,
   "question": "What is the question ?",
   "choice_data": [{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}],
   "score": 1,
   "topic_id": 1,
   "level": "BEGINNER"
}

【讨论】：

【解决方案2】：

尝试像这样解析迭代数据

<v-radio-group v-model="radioGroup">
          <v-radio
            v-for="image in JSON.parse(questions[questionIndex].choice_data)" //change added
            :key="image.imgId" //change added
            :label="image.name"
            :value="image.imgId" //change added
          ></v-radio>
</v-radio-group>

【讨论】：