PrimeOutputList
Data
{
"list1": [
"Hello",
"World"
],
"list2": [
"FormKit",
"meets",
"PrimeVue"
],
"slots": {}
}[
0
:
{
$el
:
h3
if
:
true
attrs
:
{
}
children
:
[
0
:
Default (listStyle: span)
]
}
1
:
{
$formkit
:
primeOutputList
name
:
list1
label
:
Default Divider
}
2
:
{
$formkit
:
primeOutputList
name
:
list1
label
:
Custom Divider
divider
:
}
3
:
{
$formkit
:
primeOutputList
name
:
list2
label
:
Custom Divider with Prefix Icon
iconPrefix
:
pi pi-list
divider
:
-
}
4
:
{
$el
:
h3
if
:
true
attrs
:
{
}
children
:
[
0
:
Converter
]
}
5
:
{
$formkit
:
primeOutputList
name
:
list1
label
:
Converter Function
convertValue
:
function r(e){return e.map(t=>t.toUpperCase())}
divider
:
-
}
6
:
{
$formkit
:
primeOutputList
name
:
list2
label
:
Converter Function - Char Count
convertValue
:
function l(e){return e.map(t=>`${t} (${t.length})`)}
}
7
:
{
$formkit
:
primeOutputList
name
:
list2
label
:
Converter Function - Sorted Reverse
convertValue
:
function o(e){return e.sort((t,s)=>t.localeCompare(s)).reverse()}
}
8
:
{
$el
:
h3
if
:
true
attrs
:
{
}
children
:
[
0
:
Chips
]
}
9
:
{
$formkit
:
primeOutputList
name
:
list2
label
:
Use Chip Item Class
itemClass
:
p-chip-item
divider
:
}
10
:
{
$el
:
h3
if
:
true
attrs
:
{
}
children
:
[
0
:
List Styles
]
}
11
:
{
$formkit
:
primeOutputList
name
:
list1
label
:
Use listStyle: span
listStyle
:
span
}
12
:
{
$formkit
:
primeOutputList
name
:
list2
label
:
Use listStyle: div
listStyle
:
div
}
13
:
{
$formkit
:
primeOutputList
name
:
list2
label
:
Use listStyle: ul
listStyle
:
ul
}
14
:
{
$formkit
:
primeOutputList
name
:
list2
label
:
Use listStyle: ol
listStyle
:
ol
}
]
{
list1
:
[
0
:
Hello
1
:
World
]
list2
:
[
0
:
FormKit
1
:
meets
2
:
PrimeVue
]
slots
:
{
}
}
Formkit (1.6) - PrimeVue (4.2.x) - FormKit-PrimeVue-Version 3.0.4 - sfxcode 2024