gistfile1.txt

<template lang="jade">
	#decid
		h1 Add your options
		input(
			v-model="inputQuery"
			@keyup.enter="addItem()"
		)
		ul#item-list(v-for="item in items", track-by="$index", transition='added-item')
			li
				p {{ item.item }}
				span(@click="deleteItem(item)") X
</template>

<script>

const Horizon 	= require('@horizon/client');
const horizon 	= Horizon({host: 'localhost:8181'});
const db 		= horizon('decid');

export default {
	data: () => ({
		inputQuery: '',
		items: []
	}),
	created: function() {
		horizon.connect();
		db.watch().subscribe(this.getItems);
	},
	methods: {
		getItems(items) {
			this.items = items;
		},
		addItem() {
			const input = this.inputQuery.trim();
			if (input) {
				db.store({item: input});
			}
			this.inputQuery = '';
		},
		deleteItem(item) {
			db.remove(item);
		}
	}
}
</script>

<style lang="stylus">
#decid
	text-align: center
	margin: 10% auto
	padding: 20px
	width: 500px
	box-shadow: 0px 18px 52px -16px rgba(0,0,0,0.19)

	h1
		margin 0
		text-transform uppercase
		opacity 0.5

	input
		margin 2% 0
		border 1px solid #C9C9C9
		height 30px
		transition width 1s ease
		width 260px
		font-size 1.5em
		padding 10px

		&:focus
			outline none
			width 300px

	ul#item-list
		padding 0
		list-style none

		li
			border 1px solid #ccc
			padding 10px
			text-align left
			position relative

			p
				margin 0

			&>span
				position absolute
				right 10px
				top 10px
				cursor pointer

.added-item-transition
	transition all .3s ease

.added-item-enter
	transform translateX(100%)
	opacity 0

.added-item-leave
	transform translateX(-100%)
	opacity 0



</style>