Vue 3 - 單擊后未檢查無線電輸入

Question

我有一些使用單選按鈕作為答案的問題。 問題是單擊答案后，將不會檢查單擊的單選輸入，我也無法禁用其他輸入。 我將 Vue 3 用於前端，將 nodejs 用於后端。 有什么解決辦法嗎？

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

我的組件js代碼：

<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

問題的原因是@click.prevent 指令。 您可以使用@change="updateAnswers(index)" 而不是@click.prevent。