Dynamically load options to chained select boxes with async functions
Learn how to load chained select boxes using functions.
To load chained select options we can manually trigger updateItems to update items of another select element:
template
<template>
<Vueform>
<SelectElement
name="select1"
:native="false"
:items="['a', 'b', 'c']"
@change="(newValue, oldValue, el$) => {
let select2 = el$.form$.el$('select2')
select2.clear()
select2.updateItems()
}"
/>
<SelectElement
name="select2"
:native="false"
:items="async (query, input) => {
let select1 = input.$parent.el$.form$.el$('select1')
return await select1.$vueform.services.axios.get(
`/select2-options?select1=${select1.value}`
)
}"
/>
</Vueform>
</template>We can do the same for MultiselectElement and TagsElement.
