2022-09-09 20:41:18 +00:00
< template >
< div >
2022-12-19 11:57:07 +00:00
< Head >
< Title > Vue CascadeSelect Component < / Title >
< Meta name = "description" content = "CascadeSelect is a form component to select a value from a nested structure of options." / >
< / Head >
2022-09-09 20:41:18 +00:00
< div class = "content-section introduction" >
< div class = "feature-intro" >
< h1 > CascadeSelect < / h1 >
< p > CascadeSelect is a form component to select a value from a nested structure of options . < / p >
< / div >
< AppDemoActions / >
< / div >
< div class = "content-section implementation" >
< div class = "card" >
< h5 > Basic < / h5 >
2022-12-08 12:26:57 +00:00
< CascadeSelect v -model = " selectedCity1 " :options ="countries" optionLabel = "cname" optionGroupLabel = "name" : optionGroupChildren = "['states', 'cities']" style = "min-width: 14rem" placeholder = "Select a City" / >
2022-09-09 20:41:18 +00:00
< h5 > Templating < / h5 >
2022-12-08 12:26:57 +00:00
< CascadeSelect v-model ="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" >
2022-09-09 20:41:18 +00:00
< template # option = "slotProps" >
< div class = "country-item" >
2022-12-26 16:20:31 +00:00
< img v -if = " slotProps.option.states " src = "@/assets/images/flag_placeholder.png" : class = "'flag flag-' + slotProps.option.code.toLowerCase()" / >
2022-12-08 12:26:57 +00:00
< i v-if ="slotProps.option.cities" class="pi pi-compass mr-2" > < / i >
< i v-if ="slotProps.option.cname" class="pi pi-map-marker mr-2" > < / i >
2022-09-09 20:41:18 +00:00
< span > { { slotProps . option . cname || slotProps . option . name } } < / span >
< / div >
< / template >
< / CascadeSelect >
< h5 > Loading State < / h5 >
2022-12-08 12:26:57 +00:00
< CascadeSelect placeholder = "Loading..." loading style = "min-width: 14rem" > < / CascadeSelect >
2022-09-09 20:41:18 +00:00
< / div >
< / div >
< CascadeSelectDoc / >
< / div >
< / template >
< script >
import CascadeSelectDoc from './CascadeSelectDoc' ;
export default {
data ( ) {
return {
selectedCity1 : null ,
selectedCity2 : null ,
countries : [
{
name : 'Australia' ,
code : 'AU' ,
states : [
{
name : 'New South Wales' ,
cities : [
{ cname : 'Sydney' , code : 'A-SY' } ,
{ cname : 'Newcastle' , code : 'A-NE' } ,
{ cname : 'Wollongong' , code : 'A-WO' }
]
} ,
{
name : 'Queensland' ,
cities : [
{ cname : 'Brisbane' , code : 'A-BR' } ,
{ cname : 'Townsville' , code : 'A-TO' }
]
}
]
} ,
{
name : 'Canada' ,
code : 'CA' ,
states : [
{
name : 'Quebec' ,
cities : [
{ cname : 'Montreal' , code : 'C-MO' } ,
{ cname : 'Quebec City' , code : 'C-QU' }
]
} ,
{
name : 'Ontario' ,
cities : [
{ cname : 'Ottawa' , code : 'C-OT' } ,
{ cname : 'Toronto' , code : 'C-TO' }
]
}
]
} ,
{
name : 'United States' ,
code : 'US' ,
states : [
{
name : 'California' ,
cities : [
{ cname : 'Los Angeles' , code : 'US-LA' } ,
{ cname : 'San Diego' , code : 'US-SD' } ,
{ cname : 'San Francisco' , code : 'US-SF' }
]
} ,
{
name : 'Florida' ,
cities : [
{ cname : 'Jacksonville' , code : 'US-JA' } ,
{ cname : 'Miami' , code : 'US-MI' } ,
{ cname : 'Tampa' , code : 'US-TA' } ,
{ cname : 'Orlando' , code : 'US-OR' }
]
} ,
{
name : 'Texas' ,
cities : [
{ cname : 'Austin' , code : 'US-AU' } ,
{ cname : 'Dallas' , code : 'US-DA' } ,
{ cname : 'Houston' , code : 'US-HO' }
]
}
]
}
]
} ;
} ,
components : {
CascadeSelectDoc : CascadeSelectDoc
}
} ;
< / script >
