Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

altoin's avatar

Paginate Eloquent Result with Vue

Hello Everyone, i'm writing a quiz app in laravel,wanted to show one question per page, and realized i can't do it with laravel paginate because the radio button resets once the user moves to the next page. The code is working perfectly without pagination, but i will like to use Vue to paginate the questions. The problem i have now is how to get the questions and options to show on the page.

Here is the working laravel code

<form class="form" method="post" action="/question">
                     {{csrf_field()}}
                @foreach($question as $q)
                     <div>

                         <p>{{$q->question}}</p>

                             @foreach($q->answers['option'] as $key=>$val)

                                 <div class="radio">
                                     <label><input type="radio" name="{{$q->id}}" value="{{$val}}">{{$val}}</label>
                                 </div>
                             @endforeach

                     </div>

                    @endforeach
                   <input type="submit" value="submit">
                 </form>

The laravel code works perfectly well. But i don't want all the question on 1 page.

Here is what i have done with vue.

 <form class="form" method="post" action="/question">
            {{csrf_field()}}
             <div id="ques">
            <div v-for="q in question">
                @{{ q.question }}
            </div>

            <input type="submit" value="submit">
             </div>
        </form>

<script>
    new Vue({

        el: '#ques',

        data: {
            question: {!! $question !!},

        }

    })
</script>

The Vue code shows the questions on the page, but i'm having problem linking the options to the questions(just like the laravel code). I don't know if i'm doing the right thing, Please help. Thank you

0 likes
0 replies

Please or to participate in this conversation.