Skip to content

Instantly share code, notes, and snippets.

@Lupeipei Lupeipei/TodoItem.vue
Last active Apr 25, 2019

Embed
What would you like to do?
nested slot examples.
<template>
<div class="container" style="margin-top: 5rem;">
<div class="row">
<div class="col-md-6 offset-md-3">
<ToDoList :items="items">
<template v-slot:todo-item-after="{ item }">
<i v-if="isFinished(item)" class="fas fa-check" />
</template>
</ToDoList>
</div>
</div>
</div>
</template>
<script>
import ToDoList from '~/components/ToDoList'
import _ from 'lodash'
export default {
components: { ToDoList },
data() {
return {
items: [
{ id: 1, title: 'todo item 1' },
{ id: 2, title: 'todo item 2' },
{ id: 3, title: 'todo item 3' },
{ id: 4, title: 'todo item 4' }
],
finished: [ 1, 2 ]
}
},
methods: {
isFinished(item) {
return _.includes(this.finished, item.id)
}
}
}
</script>
<template>
<li>
<span class="text-muted mr-1">{{ item.id }}.</span> {{ item.title }}
<slot name="after" :item="item" />
</li>
</template>
<script>
export default {
props: [ 'item' ]
}
</script>
<template>
<ul>
<ToDoItem v-for="item in items" :key="item.id" :item="item">
<template v-slot:after="{ item }">
<slot name="todo-item-after" :item="item" />
</template>
</ToDoItem>
</ul>
</template>
<script>
import ToDoItem from './ToDoItem'
export default {
components: { ToDoItem },
props: [ 'items' ]
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.