通过在 Vue 2.1 中使用另一个下拉列表来动态更新一个下拉列表答案

【问题标题】：Dynamically update one dropdown by using another in Vue 2.1通过在 Vue 2.1 中使用另一个下拉列表来动态更新一个下拉列表
【发布时间】：2017-03-17 15:41:29
【问题描述】：

我在 Vue v.2 中构建了一个带有地址部分的表单。我正在尝试根据在城市中选择的内容让 State 下拉列表自动填充。当用户选择“亚特兰大”时，“乔治亚”应显示在状态下拉列表中。这看起来应该很简单，特别是因为我使用的是 jQuery。我尝试实现this solution，它能够注销正确的状态，但下拉菜单仍会显示“*State”。我必须在这里遗漏一些简单的东西。

 <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
    }
  }
}

【问题讨论】：

state 真的应该是一个下拉菜单吗？
在这种情况下，它必须是，但我同意这看起来很愚蠢。理想情况下，用户应该能够选择城市或州，然后未选择的下拉菜单会自动填充。

标签： javascript jquery vue.js

【解决方案1】：

我可以建议一种不同的方法吗？一般来说，使用 Vue，除非您专门使用 jQuery 插件，否则您根本不需要 jQuery。

如果您在同一州拥有多个城市，则需要对其进行修改，但希望您能在这里看到这个想法。如果可能的话，您会想要一个状态下拉列表，这似乎很奇怪。

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;
    }
  }
})

你的模板变成了

<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.

【讨论】：