我正在使用此Vue Multiselect component。
我的表单上有8个下拉多选元素。
从第二个下拉菜单中选择一个选项时，将触发onSearchResellerCompanies方法而不是onSearchAgencyCompanies方法。
另一件事...
在我的表单上，有一个下拉菜单中的国家/地区。
如果我选择了代理商公司，然后选择了一个国家/地区，然后选择了一家代理公司，则会触发onSearchEnumCountries而不是onSearchAgencyCompanies方法。
因此，在所有情况下，都会触发最后触摸的下拉元素中的@search-change事件，而不是onSearchAgencyCompanies方法。
这是html代码：
这是Resellect公司下拉菜单元素：
<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>
这是代理公司下拉菜单元素：
<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>
这是JS代码：
/*
* 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
*/
这些是方法：
选择代理商公司时，此方法会触发：
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);
},
选择代理公司时会触发此方法：
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);
},
仅当在经销商下拉列表元素中进行搜索时，才应触发该方法：
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);
}
},
仅当在代理商下拉列表元素中进行搜索时，才应触发此方法：
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);
}
},
答案 0 :(得分：0)
几天来我一直在寻找解决这个问题的方法。
尝试了各种技巧并进行了各种测试之后，我发现此表单组件在create场景下工作正常，而在edit场景下工作失败。
几个小时前，我发现了错误。
请确保您不使用v-if指令！
为了避免奇怪的行为，请始终尝试使用v-show指令。
<!-- 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 -->