Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<h2>My Heroes</h2>
<label>Hero name:
<input v-model="heroName" placeholder="name">
<button v-on:click="add(heroName)">add</button>
<ul class="heroes">
<li v-for="hero in heroes"
<div class="link-group">
<div class="link" v-on:click="select(hero)">
<span class="badge">{{}}</span>{{}}
<button class="delete"
import router from '../../router/index'
import store from '../../store/store'
export default {
name: 'Heroes',
data: function() {
return {
heroes: undefined,
heroName: undefined
methods: {
select: function (hero) {
router.push({name: 'Detail', params : {id:}})
add: function (name) {
name = name.trim();
if (!name) { return }
this.heroName = ''
deleteHero: function (hero) {
this.heroes = store.delete(hero)
mounted: function () {
this.heroes = store.getHeroes()
<style scoped>
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
.heroes li {
position: relative;
cursor: pointer;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
.heroes a {
color: #888;
text-decoration: none;
position: relative;
display: block;
width: 250px;
.heroes a:hover {
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
min-width: 16px;
text-align: right;
margin-right: .8em;
border-radius: 4px 0 0 4px;
button {
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
font-family: Arial;
button:hover {
background-color: #cfd8dc;
button.delete {
position: relative;
bottom: 4px;
background-color: gray !important;
color: white;
.link-group {
display: flex;
.link {
width: 90%;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment