Dynamically update one dropdown by using another in Vue 2.1

Question

I have a form built in Vue v.2 with an address section. I'm trying to get the State dropdown to autopopulate based on what's selected in the city. When a user selects 'Atlanta', 'Georgia' should show in the state dropdown. This seems like it should be pretty simple, especially since I'm using jQuery. I tried to implement this solution which was able to log out the correct state, but the dropdown would still show "*State". I have to be missing something simple here.

 <div class="grid-33 city">
   <select name="business-address-city"
           v-model="bi.addresses.business.city"
           @change="updateCityState(bi.addresses.business.city)>
     <option value="">*City</option>
     <option value="Atlanta">Atlanta</option>
     <option value="Houston">Houston</option>
     <option value="Los Angeles">Los Angeles</option>
     <option value="Miami">Miami</option>
     <option value="Minneapolis">Minneapolis</option>
   </select>
 </div>

 <div class="grid-33 state">
   <select name="business-address-state" v-model="bi.addresses.business.state">
     <option value="">*State</option>
     <option value="California">California</option>
     <option value="Florida">Florida</option>
     <option value="Georgia">Georgia</option>
     <option value="Minnesota">Minnesota</option>
     <option value="Texas">Texas</option>
   </select>
 </div>


data () {
  return {
    bi: businessInfo,
    checked: true
  }
},
watch: {
  bi.addresses.business.city: function () {
    if ($('[name="business-address-city"]').val() == 'Atlanta') {
      $('[name="business-address-state"]').val('Georgia').change()
    }
  }
},
methods: {
  updateCityState (e) {
    var city = e
    var state = $('[name="business-address-state"]')
    console.log(state);
    switch (city) {
      case 'Atlanta':
        $('[name="business-address-state"] options').val('Georgia').change()
        break
      case 'Houston':
        state = 'Texas'
        break
      case 'Los Angeles':
        state = 'California'
        break
      case 'Miami':
        state = 'Florida'
        break
      case 'Minneapolis':
        state = 'Minnesota'
        break
    }
  }
}

In this case, it has to be, but I agree it seems silly. Ideally a user should be able to select either city or state and then the unselected dropdown would autopopulate. — itsclarke, Mar 17 '17 at 15:57

Bert · Accepted Answer · 2017-03-17T16:26:10.393

Can I suggest a different approach? Generally, with Vue, you do not need jQuery at all unless you're specifically using a jQuery plugin.

If you have more than one city in the same state, this would need to be modified, but hopefully you see the idea here. It seems odd that you would want a dropdown for state if this is possible.

const locations = [
  {
    city: "Atlanta",
    state: "Georgia"
  },
  {
    city:"Houston",
    state:"Texas"
  },
  {
    city: "Los Angeles",
    state: "California"
  },
  {
    city: "Miami",
    state: "Florida"
  },
  {
    city:"Minneapolis",
    state:"Minnesota"
  }
]

new Vue({
  el:"#app",
  data:{
    locations,
    bi: businessInfo,
    selectedLocation: null
  },
  watch:{
    selectedLocation(){
      this.bi.address.business.city = this.selectedLocation.city;
      this.bi.address.business.state = this.selectedLocation.state;
    }
  }
})

And your template becomes

<div id="app">
  <select v-model="selectedLocation">
    <option v-for="location in locations" :value="location">{{location.city}}</option>
  </select>
  <select v-model="selectedLocation">
    <option v-for="location in locations" :value="location">{{location.state}}</option>
  </select>
</div>

Example.

Dynamically update one dropdown by using another in Vue 2.1

1 Answers1