arquivo index

Index.vue

<template>
  <q-page class="text-black">
    <q-scroll-area
      horizontal
      style="width: 100%;"
      class="secondary-bg-color rounded-borders"
    >
      <div class="row no-wrap">
        <q-btn
          flat
          size="md"
          color="white"
          style=" margin: 3% 0% 3% 4%"
          label="ALL"
          stack
        />
        <q-btn
          flat
          v-for="(item, index) in groups" :key="index"
          size="md"
          :color="getColor()"
          style=" margin: 3% 2% 3% 4%"
          :label="item.name"
          stack
        />
      </div>
    </q-scroll-area>
  </q-page>
</template>

<script>
import Database from '../../infrastructure/persistense/Database'
import Tables from '../../infrastructure/persistense/Tables'
import GroupController from '../../application/controllers/GroupController'

export default {
  name: 'PageIndex',
  data () {
    return {
      color: '',
      groups: [],
      groupController: new GroupController()
    }
  },
  methods: {
    getColor () {
      const colors = this.filterColor(this.color)
      const numberColor = Math.floor(Math.random() * colors.length)
      this.color = colors[numberColor]
      return this.color
    },
    filterColor (removeColor) {
      const colors = [
        'red',
        'blue',
        'yellow',
        'green',
        'grey',
        'orange',
        'purple',
        'brown'
      ]

      return colors.filter(item => item !== removeColor)
    }
  }
  created () {
    const database = Database.getConnection()
    const tables = new Tables(database)
    tables.createTable()
    this.groupController.index()
      .then(data => {
        this.groups = data
        console.log(this.groups)
      })
  }
}
</script>