Get the selected checked value from the ul list in Vue.js

Question

I am tring to use Vue.js in my project. But, I do not know how to get the checked value in ul list from the dynamic API data ?

The getQuestion API is like this:

{

 "code": 0
 "data": {
 "question": [
  {
    "title": "Whick country are you in",
    "questionNo": "30",
    "answer": [
      {
        "answerNo": 1,
        "answerContent": "United States"
      },
      {
        "answerNo": 2,
        "answerContent": "China"
      },
      {
        "answerNo": 3,
        "answerContent": "Canada"
      },
      {
        "answerNo": 4,
        "answerContent": "Japan"
      },
      {
        "answerNo": 5,
        "answerContent": "England"
      }
    ]
  },
  {
    "title": "What Programming Language Should a Beginner Learn？",
    "questionNo": "37",
    "answer": [
      {
        "answerNo": 1,
        "answerContent": "Python"
      },
      {
        "answerNo": 2,
        "answerContent": "JavaScript"
      },
      {
        "answerNo": 3,
        "answerContent": "Java"
      },
      {
        "answerNo": 4,
        "answerContent": "PHP"
      },
      {
        "answerNo": 5,
        "answerContent": "Ruby"
      }
    ]
  },

}

In html, the template is:

       <div class="ques-container" id="ques_container">
        <template v-for="(quesItem,index) in question">
            <div class="ques-item">
                <p class="title">{{index+1}}.{{quesItem.title}}</p>
                <ul class="answer-group" >
                    <template v-for="(answerItem,index) in quesItem.answer">
                        <li><input type="radio" :id="index+quesItem.questionNo"
                                   :name="quesItem.questionNo"
                                   :value="{questionNo:quesItem.questionNo,answerNo:answerItem.answerNo}"/><label
                                :for="index+quesItem.questionNo"><span></span>{{answerItem.answerContent}}</label>
                    </template>
                </ul>
            </div>
        </template>
    </div>

And the template had already rendered correctly, the result: Result rendered

When the user select one answer of every question, I will get the value of the selected answer value of every question to the backend API. But I do not know how to get the checked value in ul list from the dynamic API data ? I think for this problem for a long time, but still have no idea.

Answer 1

One approach is to save the question number and the selected answer in an array.

On the HTML, I added a v-on:change passing the question number and answer like so:

<input type="radio"
    v-on:change="selectAnswer(quesItem.questionNo,answerItem.answerNo)"/>

I also added an answers array in the data to store the selected answers. Then, I added a method selectAnswer to push the data to the array answers , like so:

new Vue({
  el: '#ques_container',
  data: {
    question: [...],
    answers: []
  },
  methods: {
    selectAnswer: function(qNo, qAns) {
        this.answers[qNo] = qAns;
    }
  }
});

Once the user completes the questionnaire and hits Submit , all you'll have to do is pass the answers array.

Here's a quick fiddle: https://jsfiddle.net/m0nk3y/zrum4nts/

To view the contents of the answers array, you'll have to open your browser console.