Question

我根据另一个下拉列表的结果填充下拉列表。如果我有一个默认值，我想设置第二个下拉列表。

选择国家，以便我获得国家/地区区域。

如果我在我的编辑页面上我已经拥有国家ID，那么我在created（）上触发ajax请求并填充区域select.Ofc我有区域ID，我想设置它。

getRegions() {

    let countryId = this.form.country_id;

    if (countryId) {
        axios.get('/getRegion/' + countryId)
            .then(response => {
                this.regions = response.data;

                if (this.regions && this.form.country_region_id) {

                    this.$nextTick(() => {
                        $(".country_region").dropdown("set selected",   
                                                    this.form.country_region_id).dropdown("refresh");
                    });

/*
                    setTimeout(() => {
                        $(".country_region").dropdown("set selected", 
                                                    this.form.country_region_id).dropdown("refresh");

                    }, 1000);
*/
                }
            })
            .catch(error => {
                this.errors.push(error)
            });
    }
},

具有setTimeout的代码段在1秒后工作，选择了正确的值。

编辑：我的下拉列表实际上有一个包装器组件，所以我可以使用v-model。但是nextTick似乎仍然不起作用。

            <sm-dropdown v-model="form.country_region_id" class="country_region">
                <input type="hidden" :value="form.country_region_id" id="country_region_id">
                <div class="default text">Gebiet</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div v-for="region in regions" class="item"  :data-value="region.country_region_id"
                         :key="region.country_region_id" >
                        {{ region.internal_name }}
                    </div>
                </div>
            </sm-dropdown>

下拉组件：

<template>
    <div class="ui fluid search selection dropdown" ref="input">
        <slot></slot>
    </div>
</template>

<script>
    export default {

        props: ['value'],
        mounted() {
            let self = this;
            $(this.$el)
                .dropdown()

                .dropdown({
                    forceSelection: false,
                    onChange: function(value) {

                        self.$emit('input', value);
                        self.$emit('change');
                    }
                }).dropdown("refresh")
            ;

        }
    }
</script>

这个。$ nextTick不按照预期的方式工作

0 个答案: