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
Please or to participate in this conversation.