單選按鈕中的所選選項不起作用

Question

我正在使用Cordova和vue.js在測驗應用程序中工作，其中將從API提取問題和選項。 在這種情況下，將使用計時器來指示剩余時間。 為此，我將計時器設置在Mounted（）中，其中有一個回調函數，稍后將使用setInterval將其每1秒調用一次。 但是問題是當計時器打開時，如果我選擇一個單選按鈕，則該值為false，那么它將朝四個按鈕中的最后一個單選按鈕移動。 如果值為true，則它不會移動。 計時器關閉時不會發生此問題，然后工作正常。 請幫幫我

<template>
    <v-ons-page>
        <div class="test_body">

            <v-ons-card class="test_card">

                <div class="timer" v-if="!timeStop">

                    <div class="minutes" v-text="this.data.minutes"></div>
                    <div class="seconds" id="seconds" v-text="secondsShown"></div>
                </div>
                <div class="timer" v-else>
                    <div class="minutes" v-text="this.data.minutes"></div>
                    <div class="seconds" v-text="secondsShown"></div>
                </div>


                <div v-for="(ques,index) in questions">
                    <div v-show="index===ques_index">
                        <p class="test_text">{{ ques.question_text }} </p>

                        <ol align="left">
                            <li class="test_list" v-for="choice  in ques.choices">

                                <input type="radio" v-bind:value="choice.is_right" v-bind:name="index"
                                       v-model=" userResponses[index] "> {{ choice.choice_text }}

                            </li>

                        </ol>


                        <p class="test_number" align="right">{{index+1}} /{{questions.length}} </p>
                        <v-ons-button class="prev_next_button" modifier="cta" style="margin: 6px 0"
                                      v-if="ques_index > 0" @click="prev">
                            Prev
                        </v-ons-button>

                        <v-ons-button class="prev_next_button" modifier="cta" style="margin: 6px 0" @click="next">
                            Next
                        </v-ons-button>
                    </div>
                </div>


                <div v-show="ques_index === questions.length">

                    <h2>
                        Quiz finished
                    </h2>
                    <p>
                        Total score: {{ score() }} / {{ questions.length }}
                    </p>

                    <v-ons-button class="prev_next_button" modifier="cta" style="margin: 6px 0" @click="congratz">
                        Congratulation
                    </v-ons-button>
                </div>


            </v-ons-card>


        </div>
    </v-ons-page>
</template>
<script>
    import swal from 'sweetalert';
    import congratz from './congratulation';

    export default {
        data() {
            return {
                minute: 0,
                seconds: 0,
                interval: null,
                started: true,
                questions: {},
                ques_index: 0,
                userResponses: [],

            }
        },
        beforeMount() {
            this.question();
        },
        mounted() {

            this.loaded()

        },
        methods: {
            congratz() {
                swal({
                    text: "Congratulation on Your First Exam!",
                });
                this.pageStack.push(congratz)
            },
            question() {
                this.$http({
                    method: 'post',
                    url: this.base_url + '/exam/api/',
                    auth: {
                        username: 'l360_mobile_app',
                        password: 'itsd321#'
                    },
                    data: {
                        "id": this.$store.state.user.id,
                        "duration": this.data.minutes
                    }
                }).then((response) => {
                    //alert(response.data.questions[0].question_text);
                    //var questions = [];
                    this.questions = response.data.questions;
                })
                    .catch((error) => {
                        // alert(error);
                    });
            },
            next: function () {
                this.ques_index++;
            },
            prev: function () {
                this.ques_index--;
            },
            score() {
                var c = 0;
                for (var i = 0; i < this.userResponses.length; i++)
                    if (this.userResponses[i])
                        c++;
                return c;

            },
            loaded: function () {
                this.interval = setInterval(this.intervalCallback, 1000)
            },
            intervalCallback: function () {
                if (!this.started) return false
                if (this.seconds == 0) {
                    if (this.data.minutes == 0) {
                        return null
                    }
                    this.seconds = 59
                    this.data.minutes--
                } else {
                    this.seconds--
                }
            },
        },
        computed: {
            secondsShown: function () {
                if (this.seconds < 10) {
                    return "0" + parseInt(this.seconds, 10)
                }
                return this.seconds
            },
            timeStop: function () {
                if (this.ques_index === this.questions.length) {
                    this.started = false;
                    return this.seconds;
                }
            }
        },
        props: ['pageStack']
    }
</script>
<style>
</style>

Answer 1

為了保持輸入標簽的值唯一，請在choice_id之后添加choice_id。 使用choice.is_right + '_' + choice.choice_id代替choice.is_right 。 獲得值時，只需刪除_和id或檢查'true'是否為值的子字符串。

<ol align="left">
    <li class="test_list" v-for="choice in ques.choices">
        <input type="radio" v-bind:value="choice.is_right + '_' + choice.choice_id" v-bind:name="index" v-model="userResponses[index]">{{ choice.choice_text }}
    </li>
</ol>