防止有条件地选择输入值更改

Question

我有这个 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
} 

Answer 1

在您的情况下，我建议使用名为 curDocType 的数据对象项并观看它而不是使用计算属性：

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

数据对象：

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

观察属性：

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

Answer 2

试试<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})
        }
    }
}