JSFiddle - React, Tailwind, and code Playground

by Roland Doda

HTML

<div id="app">
{{attributes}}
<!--   <div v-for="(attribute, index) in attributes" :key="index">
    {{ attribute }}
  </div> -->
</div>

Babel + JSX

new Vue({
	el: '#app',
  data: {
 		attributeData: [
    	 [
        {
          "name": "Sprog",
          "attributes": [
            {
              "name": {
                "slug": "sprog-i-spillet",
                "value": "Sprog i spillet"
              },
              "value": [
                {
                  "slug": "engelsk",
                  "value": "Engelsk",
                  "id": "english"
                },
                {
                  "slug": "fransk",
                  "value": "Fransk",
                  "id": "french"
                },
                {
                  "slug": "italiensk",
                  "value": "Italiensk",
                  "id": "italian"
                },
                {
                  "slug": "spansk",
                  "value": "Spansk",
                  "id": "spanish"
                },
                {
                  "slug": "tysk",
                  "value": "Tysk",
                  "id": "german"
                }
              ],
              "value_meta": [
                {},
                {},
                {},
                {},
                {}
              ],
              "id": "language_in_game"
            },
            {
              "name": {
                "slug": "sprog-paa-omslag",
                "value": "Sprog på omslag"
              },
              "value": [
                {
                  "slug": "engelsk",
                  "value": "Engelsk",
                  "id": "english"
                }
              ],
              "value_meta": [
                {}
              ],
              "id": "language_on_cover"
            },
            {
              "name": {
                "slug": "undertekster",
                "value": "Undertekster"
              },
              "value": [
                {
                  "slug": "engelsk",
                  "value": "Engelsk",
                  "id": "english"
                },
             ...