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。

Vue 3 - 单击后未检查无线电输入

1 个答案: