Vue 3 - radio input not checked after click

Question

I have some questions that are using radio buttons for the answers. The problem is that after the click on an answer the clicked radio input will be not checked and I'm also unable to disable the others. I'm using Vue 3 for the front-end and nodejs for the back-end. Is there any fix for this?

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

my component js 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 I'm pushing the clicked radio value into answers array
    this.answers.push(value);
    }
  }
}
</script>

Answer 1

The cause of the problem is @click.prevent directive. You can use @change="updateAnswers(index)" instead of @click.prevent.