manshu
249
6
Vue

How do i check correct answer for this ?

Posted 2 years ago by manshu

I am unable to grab checkboxes from the form, can someone help ?

<template>
    <div class="container">
        <div class="row">
            <div class="col-lg-12" style="padding-top: 20px">
                <div class="ibox">
                    <form action="/quiz" method="POST" @submit.prevent="onSubmit">
                        <div class="ibox-title" v-show="questions">
                            <h5>Question {{ questions.current_page }} of {{ questions.total }}</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="fullscreen-link">
                                    <i class="fa fa-expand"></i>
                                </a>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div v-for="(question, index) in questions.data">
                            <div class="ibox-content" v-show="index === questionIndex">
                                <p>
                                    {{ question.question_title }}
                                </p>
                            </div>
                            <div class="ibox-content">
                                <h5>Answers</h5>
                                <div v-for="(option, index) in question.options">
                                    <label>
                                        <input type="radio"
                                               :value="option.id"
                                               :id="optionsRadiosindex"
                                               :name="options"
                                               v-model="options"
                                        >
                                        {{ option.option_title }}
                                    </label>
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <paginator :dataSet="questions" @updated="fetch" ></paginator>
                            </div>
                            <div class="col-xs-6 flex">
                                <ul class="pagination">
                                    <li>
                                        <button class="btn btn-default">Mark</button>
                                    </li>
                                    <li>
                                        <button class="btn btn-default" type="submit">Submit</button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                questions: [],
            }
        },
        created(){
            this.fetch();
        },
        methods: {
            fetch(page){
                axios.get(this.url(page)).then(response => this.questions = response.data);
            },
            url(page){
                if(! page) {
                    let query = location.search.match(/page=(\d+)/);
                    page = query ? query[1] : 1;
                }
                return `api/questions?page=${page}`;
            },
            onSubmit(){
                axios.post('/quiz', this.$data)
                    .then(response => console.log(this.$data));
            }
        },
    }
</script>

Please sign in or create an account to participate in this conversation.