@change method is taking the previeous selected value of select box

问题

I have a country Id which is bind by v-model. Whenever I change the select box i call an event @change which calls a method country_change that will fetch the value of the states belongin to that perticular country id. The porblem is that the states which I am fetching belongs to the prevously selected country id, not the country id which is currently selected. Seems like as if the @change method is running before the v-model bind value of country id is being changed.

     <select class="custom-select form-control" id="country" name="country" v-model="country" @click="country_change">
        <option value="">Select Country</option>
        @foreach($countries as $country)
        {
          <option value="{{ $country->id }}" >{{ $country->name }}</option>
        }
        @endforeach
      </select>

  data: function () {
    return {
      country: '101',
      states: null
    }
  },

  methods: {
    country_change: function () {
      axios
      .get('/states/'+this.country)
      .then(res => this.states = res.data )
      .catch(err => console.error(err));
    }
  }

回答1:

I figured out the problem was with the vue.js devtool. It was showing the results corresponding to the previously select value of select-box.

来源：https://stackoverflow.com/questions/59692303/change-method-is-taking-the-previeous-selected-value-of-select-box