Componente: Select

Estrutura básica

<template>
  <Select
    titulo="Selecione um grupo"
    :options="grupos"
    :selected="arquivo.id_grupo"
    @options="setGrupo"
    @create="createGrupo"
    @update="updateGrupo"
    @send="sendGrupo"
    @clear="clearGrupo"
  />
</template>

<script>
export default {
  name: 'ExampleSelect',
  data: () => {
    return {
      /*
        Para cada Select que for adicionado, criar uma variavel para receber os elementos alterados
      */
      upGrupo: [],
      idGrupo: 0
    }
  },
  methods: {
    createGrupo (grupo) { // criar um novo elemento para tabela :: valor vem de um emit do componente Select
      return grupo
    },
    setGrupo (grupo) { // recebe o valor selecionado no dropbox
      this.id_grupo = grupo
    },
    updateGrupo (grupo) { // altera e remove :: valor vem de um emit do componente Select
      const inArray = this.upGrupo.filter(up => up.id !== grupo.id)
      const { remove } = grupo

      if (remove) {
        this.upGrupo = inArray
      } else {
        inArray.push(grupo)
        this.upGrupo = inArray
      }
    },
    sendGrupo () { /* envia as alterações para o database */ },
    clearGrupo () { this.upGrupo = [] }
  }
}
</script>

<style>
</style>

---

• @options: retorno o valor selecionado na dropbox
• @create: (POST) retorna o valor do novo item (utilizar para disparar a criação de um novo registro na tabela)
• @update: retorna o valor alterado do item na dropbox
• @send: (PUT) utilizado para realizar o PUT da tabela
• @clear: (CANCELAR) disparado quando para cancelar as alterações dos items e limpa o array