Skip to content

Instantly share code, notes, and snippets.

@daphen
Created April 13, 2016 09:53
Show Gist options
  • Save daphen/63662f31f1292d66076f3a87fe5e27b5 to your computer and use it in GitHub Desktop.
Save daphen/63662f31f1292d66076f3a87fe5e27b5 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment