vant 사용자 정의 2 단계 메뉴 조작

<template>
 <div>
 <button @click="showM">{{ value || "    " }}</button>
 <button @click="showC">{{ value2 || "    " }}</button>
 <!--    -->
 <van-popup v-model="showPicker" position="bottom">
  <van-picker
  show-toolbar
  :columns="columns"
  @confirm="onConfirm"
  @cancel="showPicker = false"
  />
 </van-popup>
 <!--    -->
 <van-popup v-model="showPicker2" position="bottom">
  <van-picker
  show-toolbar
  :columns="columns2"
  @confirm="onConfirm2"
  @cancel="showPicker2 = false"
  />
 </van-popup>
 </div>
</template>

<script>
export default {
 mounted() {},
 data() {
 return {
  value: "",
  value2: "",
  columns: ["  ", "  ", "   "],
  city: [
  {
   name: "  ",
   value: ["  ", "  "]
  },
  {
   name: "  ",
   value: ["  ", "  "]
  },
  {
   name: "   ",
   value: ["  ", "  "]
  }
  ],
  showPicker: false,
  showPicker2: false,
  columns2: []
 };
 },
 methods: {
 onConfirm(value) {
  this.value = value;
  this.value2 = "";
  this.showPicker = false;
 },
 onConfirm2(value) {
  this.value2 = value;
  this.showPicker2 = false;
 },
 showM() {
  this.showPicker = true;
 },
 showC() {
  if (this.value) {
  let self = this;
  self.showPicker2 = true;
  self.city.forEach(v => {
   if (v.name == self.value) {
   self.value2 = self.name;
   self.columns2 = v.value;
   }
  });
  } else {
  }
 }
 },
 components: {}
};
</script>
<style lang="scss" scoped>

</style>

const citys = {
   '  ': ['  ', '  ', '  ', '  ', '  '],
   '  ': ['  ', '  ', '  ', '  ', '  ']
 };

data:{
columns: [
  {
 values: Object.keys(citys),
 className: 'column1'
  },
  {
 values: citys['  '],
 className: 'column2',
 defaultIndex: 2
  }
],
}

onChange(picker, values) {
  picker.setColumnValues(1, citys[values[0]]);
   console.log(values)
 },