Basic
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
[
{
"id": 1,
"name": "An item"
},
{
"id": 2,
"name": "A second item"
},
{
"id": 3,
"name": "A third item"
},
{
"id": 4,
"name": "A fourth item"
},
{
"id": 5,
"name": "And a fifth one"
}
]
vue
<script setup lang="ts">
const list = ref([
{ id: 1, name: 'An item' },
{ id: 2, name: 'A second item' },
{ id: 3, name: 'A third item' },
{ id: 4, name: 'A fourth item' },
{ id: 5, name: 'And a fifth one' },
]);
</script>
<template>
<ListGroupList>
<Sortable
v-model="list"
>
<ListGroupItem
v-for="item in list"
:id="`${item.id}`"
:key="item.id"
>
{{ item.name }}
</ListGroupItem>
</Sortable>
</ListGroupList>
<JsonView :data="list" />
</template>
Integration
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
[
{
"id": 1,
"name": "An item"
},
{
"id": 2,
"name": "A second item"
},
{
"id": 3,
"name": "A third item"
},
{
"id": 4,
"name": "A fourth item"
},
{
"id": 5,
"name": "And a fifth one"
}
]
vue
<template>
<ViewState
v-slot="example"
src="state://sortable/"
:data="[
{ id: 1, name: 'An item' },
{ id: 2, name: 'A second item' },
{ id: 3, name: 'A third item' },
{ id: 4, name: 'A fourth item' },
{ id: 5, name: 'And a fifth one' },
]"
>
<ListGroupList>
<Sortable
:state-src="example"
>
<ListGroupItem
v-for="item in example.data"
:id="`${item.id}`"
:key="item.id"
toggle="list"
>
{{ item.name }}
</ListGroupItem>
</Sortable>
</ListGroupList>
<JsonView :data="example.data" />
</ViewState>
</template>