vue select二級城市聯動及第二級默認選中第一個option值

當二級聯動比如選擇國家的時候，希望選中一個國家的時候后面城市默認選中第一個城市，則給國家的select加一個@change事件就可以了

 <div class="inputLine">
          <span>所在區域</span>
          <select name="" v-model="countryName" @change="selectCountry">
            <option :value="item" v-for="(item,index) in area">
              {{item.country}}
              <svg class="icon icon-arrow-bottom" aria-hidden="true">
                <use xlink:href="#icon-arrow-bottom"></use>
              </svg>
            </option>
          </select>
          <select name="" v-model="cityName">
            <option :value="item" v-for="(item,index) in countryName.city">
              {{item}}
              <svg class="icon icon-arrow-bottom" aria-hidden="true">
                <use xlink:href="#icon-arrow-bottom"></use>
              </svg>
            </option>
          </select>
        </div>

data
        countryName:{},
        cityName:"請選擇城市",
        area:[
          {
            "country":"美國",
            "city":[
              "紐約",
              "洛杉磯",
              "舊金山",
              "西雅圖",
              "波士頓",
              "休斯頓",
              "聖地亞哥",
              "芝加哥",
              "其它",
            ]
          },
          {
            "country":"加拿大",
            "city":[
              "溫哥華",
              "多倫多",
              "蒙特利爾",
              "其它"
            ]
          },
          {
            "country":"澳大利亞",
            "city":[
              "悉尼",
              "墨爾本",
              "其它"
            ]
          },
          {
            "country":"新加坡",
            "city":[
              "新加坡"
            ]
          },
          /*{
           "country":"中國",
           "city":[
           "北京市",
           ]
           },*/
        ],

methods:

selectCountry(value){
        this.cityName=this.countryName.city[0];
      },

 

2018.3.13 更新

后來新版本的iview select value的值不支持定義對象形式，所以會報錯：

@change事件改為了@on-change 事件

於是換一個實現方法：

<FormItem label="國家" prop="country">
                <Row>
                    <Col span="7">
                    <Select v-model="formValidate.country" @on-change="selectCountry" placeholder="請選擇國家">
                        <Option v-for="(item,index) in area" :value="item.country" :key="index">{{item.country}}</Option>
                    </Select>
                    </Col>
                    <Col span="17">
                    </Col>
                </Row>
            </FormItem>
            <FormItem label="城市" prop="city">
                <Row>
                    <Col span="7">
                    <Select v-model="formValidate.city"  placeholder="請選擇城市">
                      <Option v-for="(item,index) in city" :value="item" :key="index">{{item}}</Option>
                    </Select>
                    </Col>
                    <Col span="17">
                    </Col>
                </Row>
            </FormItem>

data(){
    return {
        formValidate: { 
                    country:'',
                    city:'',
                },
        area:[
                {
                  "country":"美國",
                  "city":[
                    "紐約",
                    "洛杉磯",
                    "舊金山",
                    "西雅圖",
                    "波士頓",
                    "休斯頓",
                    "聖地亞哥",
                    "芝加哥",
                    "其它",
                  ]
                },
                {
                  "country":"加拿大",
                  "city":[
                    "溫哥華",
                    "多倫多",
                    "蒙特利爾",
                    "其它"
                  ]
                },
                {
                  "country":"澳大利亞",
                  "city":[
                    "悉尼",
                    "墨爾本",
                    "其它"
                  ]
                },
                {
                  "country":"新加坡",
                  "city":[
                    "新加坡"
                  ]
                },
                /*{
                 "country":"中國",
                 "city":[
                 "北京市",
                 ]
                 },*/
              ],
              city:[]
    }  
}

methods: {
            selectCountry(value){
                const _this=this;
                this.area.forEach(function (item,index) {
                    if(item.country==value){
                        _this.city=item.city;
                        _this.formValidate.city=_this.city[0];
                    }
                })
            }
        },

新定義一個數組存放被篩選出來的city列表，選擇城市的時候遍歷這個列表，通過選擇國家改變該列表。