Vuejs edit

by John Passmore

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <div class="container">
    <div>
      <h3>Select an object from an array 'list' by clicking on Action to see its name        in the box;<br>Edit the Name in the box and click Edit to update the selected        array element.  Similarly, delete a name by selection in the table and confirmation with the delete Tab.
      </h3>
    </div>
    <div v-for=" a in array">
        {{a}}
    </div>
    <p><br></p>
    <form class="form-horizontal" @submit.prevent="doEdit(record)">
      <div class="row">
        <div class="col-md-8">
          <label>Selected Name: </label><span v-if="editing">(Id {{this.editId}})</span>
          <input type="text" class="form-control" v-el:record-name 
          v-model="editText">
        </div>
        <div class="col-xs-8" style="margin-top:15px">
         <button type="submit" class="col-xs-12 btn btn-success">Edit</button>
        </div>
      </div>
    </form>
    <h3>New Name</h3>
    <p>
    <input type="text" v-model="addText" placeholder="Add new name here" />
    <button v-on:click="addName()" class="btn btn-primary btn-sm">Add Name</button>
    </p>
    <hr>
    <table class="table table-striped table-bordered">
       <thead>
         <tr>
           <th>Index</th>
           <th>Id</th>
           <th>Name</th>
           <th>Edit</th>
           <th>Delete</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(a, index) in array">
           <td class="text-left" style="width:60px"> {{ index }} </td> 
           <td class="text-left" style="width:60px"> {{ a.id }} </td>
           <td> {{ a.name }} </td>
           <td class="text-center" style="width:50px">
           <span class="btn btn-warning...

JavaScript

new Vue({
	el: '#app',
  data: {
    addText: '',
    editText: '',
    editId: '',
    editing: false,
    record: {},
    array: [
        { name: 'Google', id: 1 },
        { name: 'Facebook', id: 2 },
        { name: 'Twitter', id: 3 },
      ],
  },
  methods: {
    addName: function() {
    	var highestId = 0
      //console.log('array.length: ' + this.array.length);
       if ( this.array.length > 0)
           (
           	highestId = Math.max.apply(Math, this.array.map(function(p) { 
      	   	return p.id;
           	})));
            else highestId = 0;
  		//console.log('highestId: ' + highestId)
      var newName = this.addText.trim();
			if (!newName) {return;}
			this.array.push(
				{name: newName, id: highestId + 1}
			);
			this.addText = '';
		},
    getName: function (selArray) {
      this.record = selArray;
      this.editText = selArray.name;
      this.editing=true;
      this.editId=selArray.id;
    },
    doEdit: function (record) {
      Vue.set(record, 'name', this.editText);
      this.editText = '';
    this.editing=false;
    },
    del: function (ind) {
      //console.log('In del - index = ' + ind)   
      if(confirm("Are you sure want to delete this Name?")){
      this.$delete(this.array, ind)}
    }
  } 
});