addressInput

addressInput_addressInput.js

export default {

    props:{
        address:{
            type: Object,
            default: ()=>{
                return {}
            }
        },
        countries:{
            type: Array,
            default:()=>{
                return []
            }
        }
    },

    data(){
        return {
            countryList:this.countries,
            states:[],
            cities:[],
        }
    },

    computed:{
        checkPropCountry(){
            if(this.countries.length){
                this.countryList = this.countries
                return !! this.countryList.length
            }
        },

        triggerCountryAxio(){
            if(!this.countries.length){
                this.getCountry()
                return true
            }
        }
    },

    mounted(){
         if(this.checkPropCountry){

         }
    },


    methods:{

        getCountry(){
            axios.get('/ajax/country')
                .then(res=>{
                    this.countryList = res.data
                })
                .catch(err=>{
                    alert(err.response.message)
                })
        },

        getState(){

            if(this.address.country && this.address.country.hasOwnProperty('id')){
                axios.get('/ajax/getStateByCountry',
                    {params:{
                            country_id:this.address.country.id
                        }})
                    .then(res=>{
                        this.states=res.data
                        this.cities= []
                        this.address.city = null
                    })
                    .catch(err=>{

                    })
            }else{
                this.address.city=null
                this.address.state=null
                this.states=[]
                this.cities=[]
            }
        },

        getCity(){
            if(this.address.state && this.address.state.hasOwnProperty('id')){
                axios.get('/ajax/getCityByState',
                    {params:{
                            state_id:this.address.state.id
                        }})
                    .then(res=>{
                        this.cities=res.data
                    })
            }else{
                this.address.city=null
                this.cities=[]
            }
        }

    }
}

addressInput_addressInput.vue

<template>
    <div v-if="checkPropCountry || triggerCountryAxio">
        <v-select
                name="country"
                v-model="address.country"
                label="name"
                :options="this.countryList"
                @input="getState"
                class="form-control"
                @clearable="getState"
        ></v-select>
        <v-select
                name="state"
                v-model="address.state"
                label="name"
                :options="this.states"
                class="form-control"
                @input="getCity"
                @clearable="getCity"
        ></v-select>
        <v-select
                name="city"
                v-model="address.city"
                label="name"
                :options="this.cities"
                class="form-control"
        ></v-select>
    </div>
</template>
<script src="./addressInput.js"></script>