select的点击前的逻辑判断

Posted 2021-05-07 lfxanla

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
      <div>
        <Select v-model="value" placeholder="请选择" @on-change="selectCapa">
          <Option v-for="item in myOptions" :key="item.value" :label="item.label" :value="item.value">
          </Option>
        </Select>
      </div>
  </div>
</template>
<script>
export default {
  created() {
    let result;
    let promise = new Promise ((resolve,reject)=>{
      sessionStorage.setItem("user", JSON.stringify([{
        value: "test1",
        label: ‘程博平‘,
      }, {
        value: "test2",
        label: ‘王立‘
      }, {
        value: "test3",
        label: ‘崔勇‘
      }]))
      result = JSON.parse(sessionStorage.getItem("user"))
      if(result) {
        resolve(result)
      }else {
        reject(result)
      }
    })
    promise.then((val)=>{
      this.myOptions = val
    },(val)=>{
      // console.log(1)
    })
    // console.log(JSON.parse(sessionStorage.getItem("user")))
  },
  data() {
    return {
      msg: ‘yxm better‘,
      value:‘‘,
      oldVal: ‘‘,
      returned: false,
      myOptions:‘‘
    }
  },
  watch:{
    value:{
      handler(curVal,oldVal){
          this.oldVal = oldVal
          //this.$set(this.value,oldVal)
          // return false

          // return oldVal;
         
　　　},
    },
  },
  methods: {
    selectCapa(){
      //console.log(this.returned)
      if(! this.returned){
         this.returned = false;
             this.$Modal.confirm({
                    title: ‘切换确认‘,
                        content: ‘您确认要切换开关状态吗？‘,
                    onOk: () => {
                        this.$Message.info(‘切换身份成功‘);
                    },
                    onCancel: () => {
                        this.$Message.info(‘已取消切换身份‘);
                       this.returned = true
                   //this.$set(this.value,oldVal)
                    this.value = this.oldVal
                      // return oldVal;
                    }
                });
                
      }else{
        this.returned = false
      }

    },
   
  }
}

</script>