nuxt-frontend/components/ComponentsBar/ComponentsBar.vue

<template>
  <v-toolbar dense flat>
    <v-overflow-btn
      :items="components"
      item-text="name"
      return-object
      v-model="componentSelected"
      label="Select Component"
      hide-details
      class="pa-0"
      flat
    ></v-overflow-btn>
    <v-btn text @click="addComponent">
      <v-icon small>icon-add</v-icon>
    </v-btn>
  </v-toolbar>
</template>


<script>
export default {
  props: {
    id: {
      type: Number
    },
    model: {
      type: String
    }
  },
  data() {
    return {
      componentSelected: '',
      components: []
    }
  },
  async mounted() {
    await this.getComponents()
  },
  methods: {
    async getComponents() {
      try {
        const response = await this.$axios.get(`/components`)
        this.components = response.data
      } catch (error) {
        console.log('TCL: getComponents -> error', error)
      }
    },
    async addComponent() {
      const data = {
        model: this.model,
        model_id: this.id,
        component_id: this.componentSelected.id
      }

      try {
        const response = await this.$axios.post('/components/attach', data)
        const modelReturned = response.data;

        this.componentSelected = null
      } catch (error) {
        console.log('TCL: addComponent -> error', error)
      }
    }
  }
}
</script>