Vuetify: [Bug Report] v-autocomplete ajax with "cache-items" and "no-filter" don't refresh items

Created on 11 May 2020  路  6Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.2.27
Vue Version: 2.6.11
Browsers: Firefox 75.0, Google Chrome, Mozilla Firefox, Internet Explorer
OS: Windows 10

Steps to reproduce

When "cache-items" and "no-filter" enabled, the search does not working.

  1. search "oh" to filter results, "Ohio" should be listed but no because the filter did not refresh items list.

Actual Behavior

When "cache-items" is disabled, the behaviour is correct. So why the issue : because the "multiple" property need "cache-items" and with "no-filter" it does not work.

Reproduction Link

https://codepen.io/cp10/pen/gOazVgQ

Other comments

I needs the "no-filter" need because filtering is done server-side.

VAutocomplete bug

All 6 comments

Ohio is not listed even if i skip the first step, can you clarify what is it for?

@jacekkarczmarczyk you're right, the issue appears with "cache-items" and another issue with "multiple && cache-items && no-filter". i've updated the report.

I do have the same problem. V-autocomplete with options "multiple & "cache-items" & "no-filter" doesn't work as expected. After the ajax call list of aucomplete entries is not being updated with new entities. Is it expected behaviour?

Same issue here, seems that the cached items are not cleared and always show in the list. And without cache-items multi select is not working properly.

Similar issue, generally the inability to clear the cached items between interactions is a problem.
possibly when de-selecting the component might be a logical point to clear cache as its a point when a user may be finished interacting with that element.

I have the same issue and I have found this workaround for the time being:

  1. Add a ref to the v-autocomplete component.
  2. When you set the items attribute with the response from the ajax request you also set the cachedItems property of the v-autocomplete:
this.$refs['name-of-ref'].cachedItems = <items from ajax response> + <currently selected item(s)>
Was this page helpful?
0 / 5 - 0 ratings