更新初始值 Vee验证未检测到更改

问题描述

所以我有两个表格字段国家和地区。第一步，您要选择国家而不是地区。如果选择了国家，则将地区（选项）添加到下一个地区。

我使用axios添加的区域选项。

我遇到问题的情况：当用户选择国家/地区时，选择地区，然后返回更改国家/地区。 必须重置该区域。我尝试在Lifecycle Hooks mounted和created中做到这一点，但是veevalidate检测到未更改。因此，该值将被更改，因此为null，但未检测到vee validate。我已经通过在watch内添加nextTick（带有mounted）解决了这个问题。

我怀疑那是否是一个好的解决方案。还有其他想法吗？

我对vue.js（javascript）经验很少。任何帮助表示赞赏。

这是我完整的 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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）