Vue

by cgough

HTML

<div id="app">
  <h2>{{title}}</h2>
  <button @click="addRow">Add
  </button>
  <ol>
    <li v-for="item in list">     
      <span>{{item.text}}</span>
      <span>{{item.name}}</span>
      
      <span>{{item.address}}</span>
      <span>{{item.phoneNumber}}</span>      
      <span>{{item.ref}}</span>
    </li>
  </ol>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
  title: "New Contact",
   list: [
      { text: "Name:", name: "James"},
      { text: "Address:", address: "23 fleet street"},
      { text: "Phone Number:", phoneNumber: 324353535},
      { text: "Reference:", ref: 12132424}
    ]
  },
  methods: {
   addRow: function() {      
       this.list.push({text:'',name:'',address:'',phoneNumber:'', ref:'' });
    },
    deleteRow(index){    
        this.users.splice(index,1);             
    }
    }
});