javascript - 单选按钮中选定的选项不起作用

Question

我正在使用 Cordova 和 vue.js 开发一个测验应用程序，其中将从 API 获取问题和选项。在此，使用计时器来指示剩余时间。为此，我在 Mounted() 中设置了计时器，其中有一个回调函数，稍后将使用 setInterval 每 1 秒调用一次。但问题是，当计时器打开时，如果我选择一个单选按钮，如果该值为 false，那么它只会移向 4 个按钮中的最后一个单选按钮。如果该值为 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.is_right 之后添加 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>