multiselect icon indicating copy to clipboard operation
multiselect copied to clipboard

Current value not shown if resolve-on-load="false" and options="async ..."

Open aimeos opened this issue 2 years ago • 2 comments

Version

  • Vue version: 3

Description

Using the code from the documentation (https://github.com/vueform/multiselect#autocomplete-with-async-options):

  v-model="value"
  :searchable="true"
  :resolve-on-load="false"
  :options="async function(query) {
    return await fetchLanguages(query)
  }"

If the value property already has a value, it's not shown in the input field.

Demo

https://jsfiddle.net/u389rv01/

aimeos avatar Oct 19 '23 09:10 aimeos

I confirm this bug. Multiselect contains next code:

<Multiselect
      v-model="innerValue"
      :searchable="true"
      @search-change="searchChangeHandler">
</Multiselect>

searchChangeHandler - it's async func, which find all options by input string.

innerValue - it's computed prop, which binded with pinia store state

const businessInfoStore = useBusinessInfoStore()

const innerValue = computed({
    get() {
        return businessInfoStore.getTaxpayerTin // getting value from store
    },
    set(newTin) {
        businessInfoStore.setTaxpayerTin(newTin) // setting value into store
    },
})

In my case innerValue contain value after initial view, but it's not shown in the input field.

I think that needs add to check modelValue and value props while first render

Johnsterr avatar Jun 20 '24 11:06 Johnsterr

@aimeos I resolve problem with prop allowAbsent="true". Try, maybe it help to you

Johnsterr avatar Jun 20 '24 15:06 Johnsterr