防止 Select 输入值有条件地改变

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>

select 输入的值像这样绑定到 Vuex 存储：

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

我想不通的是如何有条件地防止 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
}

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

防止 Select 输入值有条件地改变

Prevent Select Input value change conditionally

javascript

vue.js

vuex

vuejs2

bootstrap-vue