2023-02-28 08:29:30 +00:00
< template >
< DocSectionText v-bind ="$attrs" >
2024-02-01 12:20:41 +00:00
< p > Invalid state is displayed using the < i > invalid < / i > prop to indicate a failed validation . You can use this style when integrating with form validation libraries . < / p >
2023-02-28 08:29:30 +00:00
< / DocSectionText >
< div class = "card flex justify-content-center" >
2024-01-30 11:29:42 +00:00
< CascadeSelect v -model = " selectedCity " invalid :options ="countries" optionLabel = "cname" optionGroupLabel = "name" : optionGroupChildren = "['states', 'cities']" style = "min-width: 14rem" placeholder = "Select a City" / >
2023-02-28 08:29:30 +00:00
< / div >
< DocSectionCode :code ="code" / >
< / template >
< script >
export default {
data ( ) {
return {
selectedCity : 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' }
]
}
]
}
] ,
code : {
2023-09-22 12:54:14 +00:00
basic : `
2024-01-30 11:29:42 +00:00
< CascadeSelect v -model = " selectedCity " invalid :options ="countries" optionLabel = "cname" optionGroupLabel = "name"
2023-10-15 09:38:39 +00:00
: optionGroupChildren = "['states', 'cities']" style = "min-width: 14rem" placeholder = "Select a City" / >
` ,
2023-09-22 12:54:14 +00:00
options : `
< template >
2023-02-28 08:29:30 +00:00
< div class = "card flex justify-content-center" >
2024-01-30 11:29:42 +00:00
< CascadeSelect v -model = " selectedCity " invalid :options ="countries" optionLabel = "cname" optionGroupLabel = "name"
2023-02-28 08:29:30 +00:00
: optionGroupChildren = "['states', 'cities']" style = "min-width: 14rem" placeholder = "Select a City" / >
< / div >
< / template >
< script >
export default {
data ( ) {
return {
selectedCity : 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' }
]
}
]
}
]
} ;
}
} ;
2023-10-15 09:38:39 +00:00
< \ / script >
` ,
2023-09-22 12:54:14 +00:00
composition : `
< template >
2023-02-28 08:29:30 +00:00
< div class = "card flex justify-content-center" >
2024-01-30 11:29:42 +00:00
< CascadeSelect v -model = " selectedCity " invalid :options ="countries" optionLabel = "cname" optionGroupLabel = "name"
2023-02-28 08:29:30 +00:00
: optionGroupChildren = "['states', 'cities']" style = "min-width: 14rem" placeholder = "Select a City" / >
< / div >
< / template >
< script setup >
import { ref } from "vue" ;
const selectedCity = ref ( ) ;
const countries = ref ( [
{
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' }
]
}
]
}
] ) ;
2023-10-15 09:38:39 +00:00
< \ / script >
`
2023-02-28 08:29:30 +00:00
}
} ;
}
} ;
< / script >