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.
      </h3>
    </div>
    <div v-for=" a in array">
        {{a}}
    </div>
    <p><br></p>
    <form class="form-horizontal" @submit.prevent="doEditDel(record, index)">
      <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 v-if="!deleting && editing" type="submit" class="col-xs-12 btn btn-success"  style="width:300px; margin-right:10px">Edit</button>
         <button v-if="deleting" type="submit" class="col-xs-12 btn btn-success"  style="width:300px">Delete</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"  style="width:100px">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"> {{...

JavaScript

new Vue({
	el: '#app',
  data: {
    addText: '',
    editText: '',
    editId: '',
    editing: false,
    deleting: false,
    record: {},
    array: [
        { name: 'Google', id: 1 },
        { name: 'Facebook', id: 2 },
        { name: 'Twitter', id: 3 },
        { name: 'Skype', id: 4 },
      ],
  },
  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 (selArrayElement) {
      this.record = selArrayElement;
      this.editText = selArrayElement.name;
      this.editing=true;
      this.editId=selArrayElement.id;
    },
    
    doEditDel: function (record, indx) {
    	If (this.deleting)
      	{del(indx)}
      else 
        {
        Vue.set(record, 'name', this.editText);
        this.editText = '';
        this.editing=!this.editing;
				}
    },
    
    delGetName: function (selArrayElement,  indx) {
    this.editing=true 
    this.deleting=true
    getName (selArrayElement)
    doEdit (indx)
		},
    
    del: function (indx) {
      //console.log('In del - index = ' + ind)   
      if(confirm("Are you sure want to delete this Name?"))
      this.$delete(this.array, indx)
    }
  } 
});