Vue3 PickList

Vue3 PickList is used to reorder items between different lists. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import PickList from 'primevue/picklist';

Getting Started

PickList requires a multidimensional array as its value bound with the v-model directive and a template for its content that gets the item instance and the index via slotProps.

<PickList v-model="cars" dataKey="vin">
    <template #item="slotProps">
        <div class="p-caritem">
            <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
            <div>
                <span class="p-caritem-vin">{{slotProps.item.vin}}</span>
                <span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
            </div>
        </div>
    </template>
</PickList>

Templates

In addition to the mandatory "item" template, picklist provides "sourceHeader" and "targetHeader" slots as optional templates.

<PickList v-model="cars" dataKey="vin">
    <template #sourceHeader>
        Available
    </template>
    <template #targetHeader>
        Selected
    </template>
    <template #item="slotProps">
        <div class="p-caritem">
            <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
            <div>
                <span class="p-caritem-vin">{{slotProps.item.vin}}</span>
                <span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
            </div>
        </div>
    </template>
</PickList>

Selection

In case you need to access the selected items in the list, define a binding to the selection property with the v-model directive so that it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well. Note that this is optional and only necessary when you need to access the selection.

<PickList v-model="cars" dataKey="vin" v-model:selection="selection">
    <template #item="slotProps">
        <div class="p-caritem">
            <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
            <div>
                <span class="p-caritem-vin">{{slotProps.item.vin}}</span>
                <span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
            </div>
        </div>
    </template>
</PickList>

DataKey

It is recommended to provide the name of the field that uniquely identifies the a record in the data via the dataKey property for better performance.

Theming

PickList supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue PickList showcase for demos and documentation.