<!DOCTYPE html>
<html>
<head>
<script data-require="vue.js@*" data-semver="0.10.5" src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.10.5/vue.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<h1>User</h1>
<input type="text" v-model="user">
<button v-on="click: addUser(user)" v-attr="disabled: user ===''">Add</button>
<p v-if="users.length > 0">Click to remove</p>
<ul>
<li v-repeat="u : users" v-on="click: removeUser($index)">{{u}}</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
function fetchArray(key){
if(localStorage.getItem(key)){
return JSON.parse(localStorage.getItem(key));
}
return [];
}
function saveArray(key, value){
localStorage.setItem(key, JSON.stringify(value));
}
app = new Vue({
el: "#main",
data: {
users: fetchArray("users")
},
ready: function(){
this.$watch("users", function(value){
saveArray("users", value);
});
},
methods: {
addUser: function(name){
this.users.push(name);
this.user = "";
},
removeUser: function(index){
this.users.$remove(index)
}
}
});
/* Styles go here */