vueform / multiselect

Vue 3 multiselect component with single select, multiselect and tagging options (+Tailwind CSS support).
https://vueform.com
MIT License
808 stars 151 forks source link

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

Open aimeos opened 1 year ago

aimeos commented 1 year ago

Version

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/

Johnsterr commented 5 months ago

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 commented 5 months ago

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