Обновите начальное значение. Vee validate не обнаруживает изменений?

У меня есть два поля формы: страна и регион. Во-первых, вам нужно выбрать страну, а не регион. Если выбрана страна, я добавляю регионы (параметры) к следующему компоненту: Region.

Добавляю варианты для регионов с аксиомами.

Сценарий, в котором у меня есть проблема: когда пользователь выбирает страну, затем регион возвращается, чтобы изменить страну. Необходимо сбросить регион. Я попытался сделать это с помощью хуков жизненного цикла mounted и created, но VeeValidate изменений не обнаружил. Значит, значение правильно изменено, но VeeValidate не обнаруживает этого. Я решил это, добавив watch (с nextTick) внутрь mounted, но я сомневаюсь, что это хорошее решение. Есть ли у кого-нибудь другие идеи?

У меня мало опыта работы с Vue.js. Любая помощь приветствуется.

Это мой полный SelectBox.vue:

    <div>
        <v-select
            @input="setSelected"
            :options="choices"
            :filterable="filterable"
            :value="value"
            :placeholder="placeholder"
        ></v-select>
    </div>
</template>

<script>
import vSelect from "vue-select";
import debounce from 'lodash/debounce';
import axios from 'axios';

//axios.defaults.headers.get["Vuejs"] = 1;
export default {
    props: [
        "options", "filterable",
        "value", "url", 
        "name", "placeholder"
    ],
    data: function () {
        var choices = this.options;
        if (this.name == "region") {
            choices = this.$store.state["regionChoices"] || [];
            if (this.value && !choices.includes(this.value)) {
                this.toReset = true;
            }
            if ( Array.isArray(choices) && choices.length < 1) { 
                this.addError("region", "Country is not selected or there are not available options for your selected country.");
            }
        }
        return {
            choices: choices
            // refPrefix: this.name + "Ref"
        }
    },
    components:{
        vSelect
    },
    inject: ["addError"],
    methods: {
        searchRegions: debounce((val, vm) => {
            axios.get(vm.url + val)
            .then(res => {
                vm.$store.state["regionChoices"] = res.data.results;
            });
        }, 250),
        setSelected(val) {
            this.$emit("input", val);
            if (this.name == "country") {
                const countryId = val ? val.value : "0";
                this.searchRegions(countryId, this);
            }
        },
    },
    mounted() {
        if (this.name == "region") {
            this.$watch('value', function(value) {
                if (this.toReset) {
                    this.$nextTick(function () {
                        this.setSelected("");
                        this.toReset = value ? true : false;
                    });
                }
            }, { immediate: true });
        }
    },
}
</script>

vue.js vue-cli vue-select vee-validate
person NKSM    schedule 24.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Моя модель Vue была определена в родительском компоненте. Таким образом, мое свойство модели также должно быть обновлено из родительского элемента моего компонента. Я добавил метод resetRegion в свой родительский компонент. И поэтому я могу использовать его в моем дочернем компоненте с provide и inject.

Мой фрагмент кода родительского компонента:

export default {
    name: "form-template",
    components: {
        FieldGroup,
    },
    provide() {
        return {
            addError: this.addError,
            resetRegion: this.resetRegion
        }
    },
    methods: {
        ...mapMutations({
            updateField: "applicant/updateField"
        }),
        addError(field, msg) {
            this.errors.add({field: field, msg: msg});
        },
        resetRegion() {
            this.formData.region = "";
        }
    }
}

Мой фрагмент кода дочернего компонента:

export default {
    props: [
        "options", "value", "multiple",
        "name", "placeholder", "url"
    ],
    components:{
        vSelect
    },
    inject: ["addError", "resetRegion"],
    computed: {
        choices: function () {
            let choices = this.options;
            if (this.name == "region") {
                choices = this.$store.state["regionChoices"];
            }
            return choices || []
        }
    },
    methods: {
        searchRegions(val, vm) {
            vm.$store.state["regionChoices"] = [];
            axios.get(vm.url + "?pk=" + val)
            .then(res => {
                const choices = res.data.results || [];
                vm.$store.state["regionChoices"] = choices;
                if (Array.isArray(choices)) {
                    const curValue = vm.$store.state.lead.formData.region;
                    if (choices.length < 1 || (curValue && !choices.some(e => e.id === curValue))) {
                        this.resetRegion();
                    }
                } else {
                    this.resetRegion();
                }
            });
        },
        setSelected(val) {
            this.$emit("input", val);
            if (this.name == "country") {
                this.searchRegions(val, this);
            }
        }
    },
    mounted() {
        if (this.name == "region") {
            if(!Array.isArray(this.choices) || this.choices.length < 1) {
                this.addError("region", window.HNJLib.localeTrans.regionErr);
            }
        }
    },
    created() {
        if (this.name == "country" && this.value && !this.$store.state.hasOwnProperty("regionChoices")) {
            this.searchRegions(this.value, this);
        }
    }
}

Итак, моя проблема была решена.

person NKSM    schedule 29.09.2020