I'm currently facing an issue with radio buttons for answers in my questions. Whenever I click on an answer, the radio input does not stay checked and I am unable to disable the other options. My front-end is developed using Vue 3 and the back-end with Node.js. Is there a solution to fix this problem?
<div class="col-8 p-0 mx-auto" v-for="(item, index) in questions" :key="index">
<div class="card text-dark bg-light mb-3">
<div class="card-header">{{ index }}</div>
<div class="card-body">
<h5 class="card-title">{{ item.question }}</h5>
<div class="form-check" v-for="(choice, index) in item.choices" :key="index">
<input class="form-check-input" type="radio" name="index" :id="index" :value="index" v-model="answers" @click.prevent="updateAnswers(index)" >
<label class="form-check-label" :for="index">{{ choice }}</label>
</div>
</div>
</div>
</div>
This is a snippet of my component JavaScript code:
<script>
import axios from 'axios';
export default {
name: 'App',
data(){
return {
isLoading: true,
questions: [],
answers: []
}
},
mounted(){
this.init();
},
methods: {
init(){
axios({
method: 'GET',
url: 'http://localhost:8990/init'
}).then( (res) => {
console.log(res.data);
this.questions = res.data;
console.log(this.questions);
this.isLoading = false;
});
},
updateAnswers(value){
// Here, the clicked radio value is added to the answers array
this.answers.push(value);
}
}
}
</script>