Vue多重选择元素在错误的元素上触发事件

Question

I am using this Vue Multiselect component .

I have 8 dropdown multi-select elements on my form.

When selecting an option from the second dropdown, the onSearchResellerCompanies method gets triggered, instead of the onSearchAgencyCompanies method.

Another thing ...

On my form, there is a dropdown element with countries.

If I select a reseller company, and if I then select a country and then select an agency company, the onSearchEnumCountries gets triggered, instead of the onSearchAgencyCompanies method.

So, in all cases, the @search-change event from the last touched dropdown element gets triggered, instead of the onSearchAgencyCompanies method.

This is the html code:

This is the resellect companies dropdown element:

            <multiselect 
            id="multiselect_drop_down_reseller_companies" 
            v-model="drop_down_reseller_companies_selected" 
            track-by="id" 
            label="name" 
            :multiple="false" 
            :options="reseller_companies" 
            :searchable="true" 
            :loading="drop_down_reseller_companies_selectize_isLoading" 
            :placeholder="drop_down_reseller_companies_selectize_placeholder" 
            @select="drop_down_reseller_companies_at_select" 
            :preselectFirst="true" 
            :allowEmpty="false" 
            deselectLabel="Selected" 
            :clearOnSelect="true" 
            @search-change="onSearchResellerCompanies">

                <span slot="noResult">custom no result reseller companies</span>
                <span slot="noOptions">custom no options reseller companies</span>

            </multiselect>    

This is the agency companies dropdown element:

            <multiselect 
            id="multiselect_drop_down_agency_companies" 
            v-model="drop_down_agency_companies_selected" 
            track-by="id" 
            label="name" 
            :multiple="false" 
            :options="agency_companies" 
            :searchable="true" 
            :loading="drop_down_agency_companies_selectize_isLoading" 
            :placeholder="drop_down_agency_companies_selectize_placeholder" 
            @select="drop_down_agency_companies_at_select" 
            :preselectFirst="true" 
            :allowEmpty="false" 
            deselectLabel="Selected" 
            :clearOnSelect="true" 
            @search-change="onSearchAgencyCompanies">

                <span slot="noResult">custom no result agency companies</span>
                <span slot="noOptions">custom no options agency companies</span>

            </multiselect>

This is the JS code:

        /*
        * reseller companies settings
        * start
        */

        drop_down_reseller_companies_selectize_no_result : 'no result',
        drop_down_reseller_companies_selectize_isLoading: false,
        drop_down_reseller_companies_selectize_placeholder : 'type the name of a reseller company ...',
        drop_down_reseller_companies_selected_default : { id: null, name : 'type the name of a reseller company ...' },
        drop_down_reseller_companies_selected : { id: null, name : 'type the name of a reseller company ...' },

        reseller_companies : [],

        /*
        * reseller companies
        * stop
        */

        /*
        * agency companies settings
        * start
        */

        drop_down_agency_companies_selectize_no_result : 'no result',
        drop_down_agency_companies_selectize_isLoading: false,
        drop_down_agency_companies_selectize_placeholder : 'type the name of a agency company ...',
        drop_down_agency_companies_selected_default : { id: null, name : 'type the name of a agency company ...' },
        drop_down_agency_companies_selected : { id: null, name : 'type the name of a agency company ...' },

        agency_companies : [],

        /*
        * agency companies
        * stop
        */

These are the methods :

This method gets trggered when selecting a reseller company:

drop_down_reseller_companies_at_select({id, name}){

    consoleService.log('drop_down_reseller_companies_at_select', true);

    consoleService.log('id', true);
    consoleService.log(id, true);

    consoleService.log('name', true);
    consoleService.log(name, true);

    this.m_record.reseller_id = id;
    // optional setting
    // this.drop_down_reseller_companies_selectize_placeholder = name;
    this.drop_down_reseller_companies_selected = { id: id, name : name };

    this.campaigns = [];
    //this.m_record.campaign_id = this.m_record_default.campaign_id;
    this.m_record.campaign_id = null;

    this.drop_down_client_companies_selected = this.drop_down_client_companies_selected_default;
    this.client_companies = [];
    //this.m_record.client_id = this.m_record_default.client_id;
    this.m_record.client_id = null;

    this.drop_down_agency_companies_selected = this.drop_down_agency_companies_selected_default;
    this.agency_companies = [];
    //this.m_record.agency_id = this.m_record_default.agency_id;
    this.m_record.agency_id = null;

    //consoleService.log('m record', true);
    //consoleService.log(this.m_record, true);        

    this.dynamic_drop_downs_class();

    this.populateDropDownAgencyCompanies(id);

},

This method gets triggered when selecting a agency company:

drop_down_agency_companies_at_select({id, name}){

    consoleService.log('drop_down_agency_companies_at_select', true);

    consoleService.log('id', true);
    consoleService.log(id, true);

    consoleService.log('name', true);
    consoleService.log(name, true);

    this.m_record.agency_id = id;
    // optional setting
    // this.agency_company_selectize_placeholder = name;
    this.drop_down_agency_companies_selected = { id: id, name : name };

    this.campaigns = [];
    //this.m_record.campaign_id = this.m_record_default.campaign_id;
    this.m_record.campaign_id = null;

    this.drop_down_client_companies_selected = this.drop_down_client_companies_selected_default;
    this.client_companies = [];
    //this.m_record.client_id = this.m_record_default.client_id;
    this.m_record.client_id = null;

    //consoleService.log('m record', true);
    //consoleService.log(this.m_record, true);        

    //this.dynamic_drop_downs_class();

    //this.populateDropDownClientCompanies(id);               

},

This method should get triggered only when searching within the reseller dropdown element:

onSearchResellerCompanies(search, elId){

    consoleService.log('onSearchResellerCompanies', true);

    consoleService.log('element Id', true);
    consoleService.log(elId, true);

    consoleService.log('search', true);
    consoleService.log(search, true);

    if(this.selectize_timestamp){
       clearTimeout(this.selectize_timestamp);
    }

    if(
        search.length >= 2 &&
        search != this.drop_down_reseller_companies_selected.name
    ){

        consoleService.log('onSearchResellerCompanies q >= 2', true);

        this.selectize_timestamp = setTimeout(() => {

            this.reseller_companies_selectize_isLoading = true;

            //axios start
            axios.post(
                apiService.API_URL + '/resellerCompaniesListSelectize',
                {
                    token : this.$store.getters.token,
                    q : search,
                }
            ).then(
                (response) => {

                    this.reseller_companies_selectize_isLoading = false;

                    consoleService.log('administrator form selectize search axios /onSearchResellerCompanies response success', true);
                    consoleService.log(response.data, true);

                    this.reseller_companies = response.data.data;

                }
            ).catch(
                (error) => {

                    // nothing to do here

                    //consoleService.log('administrator form selectize search axios /onSearchResellerCompanies response error', true);
                    //consoleService.log(error, true);

                }
            );
            //axios stop

        }, 500);

    }else{

        consoleService.log('onSearchResellerCompanies NO', true);

    }

},

This method shoud get triggered only when searching within the agency dropdown element:

onSearchAgencyCompanies(search, elId){

    consoleService.log('element Id', true);
    consoleService.log(elId, true);

    consoleService.log('onSearchAgencyCompanies', true);

    consoleService.log('search', true);
    consoleService.log(search, true);

    if(this.selectize_timestamp){
       clearTimeout(this.selectize_timestamp);
    }

    if(
        search.length >= 2 &&
        search != this.drop_down_agency_companies_selected.name
        ){

        this.selectize_timestamp = setTimeout(() => {

            this.agency_companies_selectize_isLoading = true;

            //axios start
            axios.post(
                apiService.API_URL + '/agencyCompaniesListSelectize',
                {
                    token : this.$store.getters.token,
                    q : search,
                }
            ).then(
                (response) => {

                    this.agency_companies_selectize_isLoading = false;

                    consoleService.log('administrator form selectize search axios /onSearchAgencyCompanies response success', true);
                    consoleService.log(response.data, true);

                    this.agency_companies = response.data.data;

                }
            ).catch(
                (error) => {

                    // nothing to do here

                    //consoleService.log('administrator form selectize search axios /onSearchAgencyCompanies response error', true);
                    //consoleService.log(error, true);

                }
            );
            //axios stop

        }, 500);

    }

},

Answer 1

I have been trying to find a solution to this problem for days now.

After trying all kind of tricks and running all kind of tests, I found out that this form component was working fine on the create scenario and failing on the edit scenario.

A couple of hours ago, I found the BUG.

Make sure that you do not use v-if directives !

Always try and use v-show directives, in order to avoid strange behaviour.

<!-- row [ dropdowns companies ] / start -->
<div class="row">

    <!-- dropdown resellers companies / start -->
    <div v-show="show_drop_down('const_access_level_reseller')" 
    v-bind:class="drop_down_number_of_columns">

        <div class="form-group">

            <label>{{ translations.reseller_optional | filter_translation_default('reseller_optional') }}</label>

            <multiselect 
            id="multiselect_drop_down_reseller_companies" 
            name="multiselect_drop_down_reseller_companies" 
            autocomplete="off" 
            :autocomplete="off" 
            v-model="drop_down_reseller_companies_selected" 
            track-by="id" 
            label="name" 
            :multiple="false" 
            :options="reseller_companies" 
            :searchable="true" 
            :loading="drop_down_reseller_companies_selectize_isLoading" 
            :placeholder="drop_down_reseller_companies_selectize_placeholder" 
            @select="drop_down_reseller_companies_at_select" 
            :preselectFirst="true" 
            :allowEmpty="false" 
            deselectLabel="Selected" 
            :clearOnSelect="true" 
            :clear-on-select="true" 
            @search-change="searchForResellerCompany">

                <span slot="noResult">custom no result reseller companies</span>
                <span slot="noOptions">custom no options reseller companies</span>

            </multiselect>                

            <span class="text-danger" 
                v-show="validationErrorsFormAdministrator.reseller_id" 
                v-text="validationErrorsFormAdministrator.reseller_id"></span>                                

        </div>

    </div>
    <!-- dropdown resellers companies / stop -->