change event triggering continuously in vue-multi-select

Viewed 225

I have a multiselect dropdown in vuejs below:

        <h4>Symptoms</h4>
        <div class="select">
          <multi-select
            search
            v-model="selected_symptoms_list"
            :options="multiDropDownOptions"
            :selectOptions="receivedData.symptoms_list"
            :btnLabel="multiselectBtnLabel"
            @selectionChanged="FilterBySelectedItem"
          />
          <span class="select-highlight"></span>
          <span class="select-bar"></span>
        </div>

receivedData variable receives values through api call when page is loaded.

FilterBySelectedItem method calls api when some item is selected from the dropdown and it also receives the data in receivedData variable so the dropdown could be populated again with new values.

But using receivedData variable in two different api calls causing the event to trigger continuously and making api calls written insideFilterBySelectedItem.

Here is the doc for vue-multi-select

How can I tackle this problem.

0 Answers
Related