Предотвратить выбор Изменение входного значения условно - PullRequest
0 голосов
/ 12 декабря 2018

У меня есть этот компонент 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
} 

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Попробуйте <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})
        }
    }
}
0 голосов
/ 12 декабря 2018

В вашем случае я рекомендую использовать объект объекта данных с именем 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})
            }
         }
       }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...