1

I populate a dropdown, based on the result of another dropdown. And if i got a default value i want to set the second dropdown.

select country so i get al the country regions.

If i am on my edit page i already have the country id, so i trigger the ajax request on created() and populate the regions select.Ofc i have the region id and i would like to set it.

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

The code segment with the setTimeout is working 1sec later the correct value is selected.

Edit: My dropdown actually got a wrapper component, so i can use v-model on it. But the nextTick still doesnt seem to work.

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

Dropdown component:

<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>
therabbityouknow
  • 233
  • 2
  • 5
  • 17
  • You need [wrapper components](https://vuejs.org/v2/examples/select2.html) for your dropdowns. See https://stackoverflow.com/a/43255516/392102 – Roy J Oct 11 '17 at 12:54
  • @RoyJ i updated my question, i already put my dropdown in a component cause i needed it to use v-model. – therabbityouknow Oct 11 '17 at 13:21
  • The `.dropdown()` jQuery calls need to be confined to wrapper components. A data change should be passed to the component via a prop, which triggers the call to `.dropdown`. – Roy J Oct 11 '17 at 13:58
  • i tried this aswell, i think there is a problem that i get the data via an ajax request. – therabbityouknow Oct 11 '17 at 14:04

0 Answers0