vue二级联动select

<div>
          <span>所在区域</span>
          <select name="" v-model="country">
            <option :value="item" v-for="(item,index) in area">{{item.country}}</option>
          </select>
          <select name="" v-model="cityName">
            <option :value="item" v-for="(item,index) in country.city">{{item}}</option>
          </select>
</div>

vue data:

export default{
    data(){
      return {
        countryName:"",
        cityName:"",
        area:[
          {
            "country":"美国",
            "city":[
              "纽约",
              "洛杉矶",
              "旧金山",
              "西雅图",
              "波士顿",
              "休斯顿",
              "圣地亚哥",
              "芝加哥",
              "其它",
            ]
          },
          {
            "country":"加拿大",
            "city":[
              "温哥华",
              "多伦多",
              "蒙特利尔",
              "其它"
            ]
          },
          {
            "country":"澳大利亚",
            "city":[
              "悉尼",
              "墨尔本",
              "其它"
            ]
          },
          {
            "country":"新加坡",
            "city":[
              "新加坡"
            ]
          },
          /*{
           "country":"中国",
           "city":[
              "北京市",
           ]
           },*/
        ],
      }
    },

实现原理：通过vue v-model 绑定获取到area当前的对象，让后city遍历的时候世界遍历当前获取到的国际的对象下的city就好，当需要向后台传值的，要传的是vue实例下 this.countryName.country