tdd.js

<template>
    <div>
      <h3>Usuários</h3>
    
      <form @submit.prevent="getUsers">
        <vx-card class="mt-4">
          <vs-row vs-w="12">
            <vs-col vs-type="flex" vs-lg="2" vs-sm="4" vs-xs="12" class="mr-3">
              <vs-input label="Quem?" placeholder="Fantasia, razão ou CNPJ" v-model="userName" />
            </vs-col>
            <vs-col vs-type="flex" vs-lg="2" vs-sm="4" vs-xs="12" class="mr-2">
              <vs-select label="Estado" placeholder="Selecione o Estado" v-model="stateId">
                <vs-select-item :key="state.id" :value="state.id" :text="state.name" v-for="state in statesList" />
              </vs-select>
            </vs-col>
            <vs-col vs-type="flex" vs-lg="2" vs-sm="4" vs-xs="12">
              <vs-select v-model="regionId" @change="onRegionChange" :disabled="disabled" label="Município" placeholder="Selecione o Município">
                <vs-select-item :key="region.id" :value="region.id" :text="region.name" v-for="region in regionsList" />
              </vs-select>
            </vs-col>
          </vs-row>
    
          <vs-row vs-w="12" class="mt-5">
            <button type="submit" class="vs-component vs-button float-right vs-button-primary vs-button-filled ml-10 mb-2" style="user-select: auto;">Mostrar</button>
          </vs-row>
        </vx-card>
      </form>
    </div>
    </template>
    
    <script>
    import UserService from '@/services/user'
    import StateService from '@/services/state'
    import RegionService from '@/services/region'
    
    export default {
      data() {
        return {
          userName: '',
          stateId: '',
          regionId: '',
          regionName: '',
          usersList: {},
          statesList: {},
          regionsList: {},
          disabled: true,
        }
      },
      components: {
        UserService
      },
      async created() {
        let stateServiceResponse = await StateService.getAll()
        this.statesList = stateServiceResponse.data
      },
      watch: {
        async stateId($event, value) {
          this.regionId = ''
          this.disabled = false
          let stateId = value
          let regionServiceResponse = await RegionService.getAll(stateId)
          this.regionsList = regionServiceResponse.data
        }
      },
      methods: {
        async getUsers() {
          if (this.stateId !== '' && this.regionName !== '') {
            let userServiceResponse = await UserService.getAll(this.stateId, this.userName, this.regionName)
            this.usersList = userServiceResponse.data
          }
        },
        onRegionChange(regionId) {
          if (regionId !== '') {
            let regionName = this.regionsList.find(region => region.id == regionId).name
            this.regionName = regionName
          }
        }
      }
    }
    </script>