Region issue

[jensnylander]

Issue:

If country state initially is null but being set to US and region state also initially null but being set to TX this happens:

Country will be set correctly but this would reset the region to empty overwriting the actual state value.

The only solution I could come up with is:

   // Here the country is being set
   setTimeout(() => {
        this.address.region = newAddress.region
      }, 10)

[gehrj]

This is something that we had to deal with in our own project as well, I can try and revisit the issue and see if there is a way to not reset state when it is already the correct country but the timing of it was making it quite difficult and the ability to reset state when switching countries is an important feature. Our solution is very similar to yours and I will share it, but I will also take another look at finding a way to have this not happen while also keeping the feature for when we want it to happen.

` const a = this.form.primary_contact.state Vue.set(this.form, set, Object.assign({}, this.form.primary_contact))

Vue.nextTick(() => { const f = this.form as any Vue.set(f[set], 'state', a) }) `

[ianneub]

I'm also hitting this issue, but I can't seem to be able to get the region to change programatically. I'm new to Vue so I'm sure i'm doing something wrong. Would either of you have a minute to help me out?

Clicking on either the CA or NV button should change the country to US (works fine) and the region to the sate (not working).

Thanks in advance for your help.

<template>
  <div>
    <h1>Test</h1>
    <country-select v-model="country" :country="country" topCountry="US" autocomplete="country"/>
    <region-select v-model="region" :country="country" autocomplete="address-level1"/>
    <p>Region is: {{ region }}</p>
    <button @click="changeTo('CA')">CA</button>
    <button @click="changeTo('NV')">NV</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      country: "US",
      region: "CA"
    };
  },
  methods: {
    changeTo: function(region) {
      console.log(`Changing country to US`);
      this.country = "US";
      this.$nextTick(function() {
        console.log(`Changing region to ${region}`);
        this.region = region;
      });
    }
  }
};
</script>

<style>
</style>

I've setup a codesandbox demonstrating the issue:

https://codesandbox.io/s/serverless-leftpad-u9iiu?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

[gehrj]

@ianneub you are missing the required :region="region" part of your region component. I have edited the sandbox and attached the fix you need.

https://codesandbox.io/s/vue-region-select-issue-41nqp

[ianneub]

Ah, yes, thank you @gehrj !