JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.min.css">
<div id="app">
</div>

<script type="text/x-template" id="renderTemplate">
    <div>
        <div class="container is-fluid">
            <div class="columns is-desktop">
                <div class="column is-7">
                    <div class="card">
                        <header class="card-header">
                            <p class="card-header-title">
                                Question {{ this.counter+1 }}/{{ question.length }} <!-- question xx / of xx questions -->
                            </p>
                            <a href="/account" class="card-header-icon" aria-label="more options">Exit</a>
                        </header>
                        <div class="card-image">
                            <figure class="image" v-if="question[this.counter].image">
                                <img :src="question[this.counter].image" alt="Placeholder image">
                            </figure>
                            <span v-else>
                            </span>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-content has-text-centered">
                                    <p class="title is-4">
                                        {{ question[this.counter].description }}
                                    </p>
                                </div>
                            </div>
                            <div class="notification" v-if="question[this.counter].is_info">
                                {{ question[this.counter].source }}
                            </div>
                            <div class="content has-text-centered" v-for="(item, index) in question[this.counter].choice_in_random_order" :key="index">
                              ...

JavaScript

new Vue ({
        el: '#app',
        template: '#renderTemplate',
        props: ['questions'],
        created() {
             this.addToObject()
         },
         mounted(){
            console.log(this.question)
         },
        data: function(){
            return {
                // question: this.questions.question,
                counter: 0,
                question: [{
                                "id": 1,
                                "stack_id": 1,
                                "description": "What do you see on the image?",
                                "is_info": 0,
                                "source": "This is a chank rod! With an piston attached to its end.",
                                "image": "http://via.placeholder.com/350x350",
                                "tags": null,
                                "created_at": "2017-09-10 17:19:54",
                                "updated_at": "2017-09-11 20:25:30",
                                "choice_in_random_order": [
                                        {
                                        "id": 6,
                                        "question_id": 1,
                                        "choice": "Cylinder",
                                        "correct": 0,
                                        "created_at": "2017-09-10 17:23:33",
                                        "updated_at": "2017-09-11 20:05:03"
                                        },
                                        {
                                        "id": 5,
                                        "question_id": 1,
                                        "choice": "Chank rod with piston",
                                        "correct": 1,
                                        "created_at": "2017-09-10 17:23:33",
                                        "updated_at": "2017-09-11 20:25:30"
                                        },
                                ...