<!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 */