조건부로 Select Input 값 변경 방지

조건부로 Select Input 값 변경 방지

다음 vue 컴포넌트가 있습니다.

<template>
    <div id="OrderTypeSelect" class="order-type-select">        
         <b-form-select v-model="curDocType" :options="options" class="mb-3">
        </b-form-select>        
    </div>
</template>

선택한 입력 값은 다음과 같이 Vuex 저장소에 바인딩됩니다.

computed: {
        curDocType: {
            get () {
                return this.$store.state.curDocType
            },
            set (value) {
                 this.$store.commit('setcurDocType', value)                
            }
        }
    }

내가 이해할 수 없는 것은 선택값의 변경을 조건부로 방지하는 방법이다.저도 해봤어요.

computed: {
        curDocType: {
            get () {
                return this.$store.state.curDocType
            },
            set (value) {
                if (this.$store.state.curOrder == ""){
                    this.$store.commit('setcurDocType', value)
                }
                else{
                    console.log("Debe descartar");
                    this.curDocType.get() //This throws error!
                }
            }
        }
    }

스토어에 값을 커밋하지 않아도 입력 필드의 값이 변경됩니다.

전화해야겠다get()상태가 트리거되었을 때 이 바인딩을 영속적으로 하려면 , 다음의 순서를 실행합니다.

if (this.$store.state.curOrder != "") {
  //Do not modify store and return the input selection to it's previous value
} 

당신의 경우 데이터 오브젝트 아이템을 사용하는 것을 추천합니다.curDocType계산 속성을 사용하지 않고 시청합니다.

 <b-form-select v-model="curDocType" :options="options" class="mb-3">

data 객체:

  data(){
     return{
         curDocType:this.$store.state.curDocType
        };
       }

watch 속성:

   watch:{
     curDocType(newval,oldval){
            if (this.$store.state.curOrder == ""){
                this.$store.commit('setcurDocType', newval)
            }else{
             this.$nextTick(() => {this.curDocType=this.$store.state.curDocType})
            }
         }
       }

해라<b-form-select v-model="curValue" @input="setValue" :options="options" class="mb-3">어디에curValue는 변수입니다.data그리고.setValue방법은 다음과 같습니다.

methods: {
    setValue(value) {
        if (this.$store.state.curOrder == "") {
            this.$store.commit('setcurDocType', value)
            this.curValue = value
        } else {
            console.log("Debe descartar");
            this.$nextTick(() => {this.curValue = this.$store.state.curDocType})
        }
    }
}

언급URL : https://stackoverflow.com/questions/53744584/prevent-select-input-value-change-conditionally