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.
