[Vuejs]-Json Data getting looped incorrectly by each character in v-for in vue js,

by

0👍

The problem is, that this "[{imgId:1,name:'qw'},{imgId:2,name:'sadda'},{imgId:3,name:'sdasdsa'}]" is not an array full of objects, it is a string.

So if you try to loop trough a string, you get every part of the string as an element for the loop. Visualize it as that:

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

So to solve your problem, you need choice_data in the needed format (array of objects) inside of your response.data.

Example:

{
   "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"
}

0👍

Try parsing the iterated data like

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

Leave a comment