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

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

我不知道如何有条件地防止select值更改。我试过这个：

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

的数据对象项并观察它，而不是使用computed属性：

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

   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="curDocType" :options="options" class="mb-3">

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

---

在您的情况下，我建议使用名为

curDocType

的数据对象项并观察它，而不是使用computed属性：

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

   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="curDocType" :options="options" class="mb-3">

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

试试

其中，

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

试试

其中，

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

---

您是否尝试了

reurn this.$store.state.curDocType

而不是

this.curDocType.get（）

`返回此值。$store.state.curDocType不起作用，输入值会像这样更改。不知道set（）是否应该返回一个值。无论如何，不要按照文档进行操作：您是否尝试了

reurn this.$store.state.curDocType

而不是

this.curDocType.get（）

`返回此值。$store.state.curDocType不起作用，输入值也会像这样更改。不知道set（）是否应该返回一个值。不管怎么说，与文档不符：对不起，这与我的原始代码具有相同的效果。输入选择值可能会更改对不起，输入错误，请立即尝试。请注意，您在组件上使用了

v-model

。恐怕我仍然有相同的结果：（在这些更改后也不工作，我可以看到您的示例正在工作，可能是我使用的库有问题（bootstrap vue）或者Vuex存储在Mix中对不起，这与我的原始代码具有相同的效果。输入选择值可以更改。对不起，有输入错误，请立即尝试。请注意，您在组件上使用了

v-model

。恐怕我仍然有相同的结果：（这些更改后也不起作用我可以看出您的示例起作用了，可能是我正在使用的库（bootstrap vue）或Vuex存储在混合中的问题