Simple Slots: Todo Item

by Alex Kyriakidis

HTML

<div id="app" class="container">
  <todo-item>
    Buy bananas
    
    <template v-slot:description>
      <p>
        Bananas are good for your health
      </p>
    </template>
    
    <template #button-text>
      Make it nice
    </template>
  </todo-item>
  
  <todo-item>
    Eat bananas
    
    <template v-slot:description>
      <p>
        Bananas are good for your health
      </p>
    </template>
  </todo-item>
</div>


<script type="text/x-template" id="todo-item-template">
  <div>
    <input type="checkbox" v-model="completed">
    <span :class="{done: completed}">
    	<slot></slot>
    </span>
    <slot name="description"></slot>
    <button>
    	<slot name="button-text">Highlight</slot>
    </button>
  </div>
</script>

CSS

body {
  padding: 20px;
}

.done {
  text-decoration: line-through;
  color: green;
}

.description {
  font-size: 11px;
}

Vue

Vue.component('todo-item', {
	template: '#todo-item-template',
  data () {
  	return {
    	completed: false
    }
  }
})

new Vue({
  el: "#app"
})