select级联问题处理

1.【template】

<div class="inputLine">
     <span>所在区域</span>
     <select name="" v-model="countryName" @change="selectCountry">
        <option :value="item" v-for="(item,index) in area">
        {{item.country}}
        </option>
     </select>
     <select name="" v-model="cityName" style="width:90px">
        <option :value="item" v-for="(item,index) in countryName.city">
        {{item}}
        </option>
     </select>
</div>

2.【data】

countryName: {
     country: "客户等级",
     city: [
       "白金",
       "黄金",
       "钻石",
       "VIP",
       "VVIP",
      ]
   },
  cityName: "白金",
  area:[
  {
    country: "客户等级",
    city: [
      "白金",
      "黄金",
      "钻石",
      "VIP",
      "VVIP",
    ]
   },
  {
     country: "风险承受能力",
     city: ["低风险", "中低风险", "中高风险", "高风险"]
   },
  {
     country: "持有产品",
     city: ["理财", "基金", "保险","贵金属","存单","国债"]
   },
  ],

3.3.【method】

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