first simple data from demo api in index.vue

frontend/quasar.conf.js

@@ -46,7 +46,8 @@ module.exports = function (ctx) {
         'QCardSection',
         'QCardActions',
         'QCheckbox',
-        'QSeparator'
+        'QSeparator',
+        'QInput'
       ],
 
       directives: [
@@ -86,7 +87,7 @@ module.exports = function (ctx) {
     devServer: {
       // https: true,
       // port: 8080,
-      open: true // opens browser window automatically
+      open: false // opens browser window automatically
     },
 
     // animations: 'all' --- includes all animations

frontend/src/pages/Index.vue

@@ -2,9 +2,9 @@
   <div class="q-pa-md">
     <q-table
       title="Treats"
-      :data="data"
+      :data="todos"
       :columns="columns"
-      row-key="name"
+      row-key="title"
       selection="single"
       :selected.sync="selected"
       :filter="filter"
@@ -22,11 +22,11 @@
       <template v-slot:item="props">
         <div
           class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
-          :style="props.selected ? 'transform: scale(0.95);' : ''"
+          :style="props.selected ? 'transform: scale(0.98);' : ''"
         >
           <q-card :class="props.selected ? 'bg-grey-2' : ''">
             <q-card-section>
-              <q-checkbox :dense="denseOn" v-model="props.selected" :label="props.row.name" />
+              <q-checkbox :dense="denseOn" v-model="props.selected" :label="props.row.title" />
             </q-card-section>
             <q-separator />
             <q-list dense>
@@ -59,127 +59,44 @@ export default {
       denseOn: true,
       filter: '',
       selected: [],
+      todos: [],
       columns: [
         {
           name: 'desc',
           required: true,
           label: 'Dessert (100g serving)',
           align: 'left',
-          field: row => row.name,
+          field: row => row.title,
           format: val => `${val}`,
           sortable: true
         },
-        { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
+        { name: 'userId', align: 'center', label: 'ID', field: 'userId', sortable: true },
-        { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
+        { name: 'id', label: 'fID', field: 'id', sortable: true },
-        { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
+        { name: 'title', label: 'Titel', field: 'title' },
-        { name: 'protein', label: 'Protein (g)', field: 'protein' },
+        { name: 'completed', label: 'Komplett', field: 'completed' },
-        { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
-        { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
-        { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
       ],
       data: [
         {
-          name: 'Frozen Yogurt',
+          "userId": 1,
-          calories: 159,
+          "id": 1,
-          fat: 6.0,
+          "title": "delectus aut autem",
-          carbs: 24,
+          "completed": false
-          protein: 4.0,
-          sodium: 87,
-          calcium: '14%',
-          iron: '1%'
-        },
-        {
-          name: 'Ice cream sandwich',
-          calories: 237,
-          fat: 9.0,
-          carbs: 37,
-          protein: 4.3,
-          sodium: 129,
-          calcium: '8%',
-          iron: '1%'
-        },
-        {
-          name: 'Eclair',
-          calories: 262,
-          fat: 16.0,
-          carbs: 23,
-          protein: 6.0,
-          sodium: 337,
-          calcium: '6%',
-          iron: '7%'
-        },
-        {
-          name: 'Cupcake',
-          calories: 305,
-          fat: 3.7,
-          carbs: 67,
-          protein: 4.3,
-          sodium: 413,
-          calcium: '3%',
-          iron: '8%'
-        },
-        {
-          name: 'Gingerbread',
-          calories: 356,
-          fat: 16.0,
-          carbs: 49,
-          protein: 3.9,
-          sodium: 327,
-          calcium: '7%',
-          iron: '16%'
-        },
-        {
-          name: 'Jelly bean',
-          calories: 375,
-          fat: 0.0,
-          carbs: 94,
-          protein: 0.0,
-          sodium: 50,
-          calcium: '0%',
-          iron: '0%'
-        },
-        {
-          name: 'Lollipop',
-          calories: 392,
-          fat: 0.2,
-          carbs: 98,
-          protein: 0,
-          sodium: 38,
-          calcium: '0%',
-          iron: '2%'
-        },
-        {
-          name: 'Honeycomb',
-          calories: 408,
-          fat: 3.2,
-          carbs: 87,
-          protein: 6.5,
-          sodium: 562,
-          calcium: '0%',
-          iron: '45%'
-        },
-        {
-          name: 'Donut',
-          calories: 452,
-          fat: 25.0,
-          carbs: 51,
-          protein: 4.9,
-          sodium: 326,
-          calcium: '2%',
-          iron: '22%'
-        },
-        {
-          name: 'KitKat',
-          calories: 518,
-          fat: 26.0,
-          carbs: 65,
-          protein: 7,
-          sodium: 54,
-          calcium: '12%',
-          iron: '6%'
         }
       ]
     }
+  },
+
+  created: function() {
+    this.fetchTodos();
+  },
+
+  methods: {
+    fetchTodos () {
+      this.$axios.get('https://jsonplaceholder.typicode.com/todos')
+        .then((response) => {
+          this.todos = response.data;
+        })
+    }
   }
 }
 </script>