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>

yes I don't have any problem with this. the only problem is with the radio that will be not checked. — newbiedev
– newbiedev, Commented Apr 25, 2021 at 8:31

Khin Me Me Latt · Accepted Answer · 2021-04-25 09:15:37Z

6

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

edited Apr 25, 2021 at 9:15

answered Apr 25, 2021 at 9:02

Khin Me Me Latt

1461 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

newbiedev Over a year ago

I will try change it and let you know. Anyway any suggestion on how to disable other options availavle?

newbiedev Over a year ago

I get this.answers.push(index) in my updateAnswers() method after changed the directive. This is starnge becuase the variable answers is an array

Khin Me Me Latt Over a year ago

You can disable other options with :disabled="disabled == 1".

newbiedev Over a year ago

Unfortunately not work, radio input still unchecked and the @change will also cause problem with the Array.push() function. Also since I'm in a v-for loop I cant just set the disabled attribute into markup, it need to be added dynamically!

Khin Me Me Latt Over a year ago

In my sample code, answers.push() works well. You can view it in my codepen.You can disable options depending on a value by using :disable or v-bind:disable.

|

Collectives™ on Stack Overflow

Vue 3 - radio input not checked after click

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related