vue开发移动端H5页面，popup组件和picker组件，如何清除之前的选中？

页面有三处选择时间，共用一个picker组件，再次选择，保留着之前的数据，怎么清除？

比如早餐选择了7:00-9:00.

我选择午餐，picker选择器，还是选择7:00-9:00为选中状态。

我希望打开午餐显示00:00-00:00.

选择完午餐，比如11:30-13:30。

再点早餐是7:00-9:00,点午餐是11:30-13:30，再点晚餐，是00:00-00:00

如何实现？

home.vue页面

++++++++++++++++++++++++++++++++++++++

 :lazy-render='false'是重点！！！！！！！

敲黑板，否则在showPopFn无法得到picker组件实例，尽管用了nextTick也不行！！！！

:lazy-render='false' position="bottom" :style="{height: '40%' }" >

 

+++++++++++++++++++++++++++++++++++++++++

打开popup弹层时，给picker重新赋值，让picker组件显示之前选好的数据。

setColumnIndex两个参数，第一个参数是你要改哪列，第二个参数是，你要改成啥

像我的时间是00:00 ——00:00

我有4列，我写了4次！！！！！

showPopFn(type){

this.$nextTick(()=>{

if(type==1){

this.$refs.mypicker.setColumnIndex(0,this.breakfastIndex[0]);

      this.$refs.mypicker.setColumnIndex(1,this.breakfastIndex[1]);

      this.$refs.mypicker.setColumnIndex(2,this.breakfastIndex[2]);

      this.$refs.mypicker.setColumnIndex(3,this.breakfastIndex[3]);

    }else if(type==2){

this.$refs.mypicker.setColumnIndex(0,this.lunchIndex[0]);

      this.$refs.mypicker.setColumnIndex(1,this.lunchIndex[1]);

      this.$refs.mypicker.setColumnIndex(2,this.lunchIndex[2]);

      this.$refs.mypicker.setColumnIndex(3,this.lunchIndex[3]);

    }else if(type==3){

this.$refs.mypicker.setColumnIndex(0,this.dinnerIndex[0]);

      this.$refs.mypicker.setColumnIndex(1,this.dinnerIndex[1]);

      this.$refs.mypicker.setColumnIndex(2,this.dinnerIndex[2]);

      this.$refs.mypicker.setColumnIndex(3,this.dinnerIndex[3]);

    }

this.type=type;

    this.showPop=true;

  })

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++