JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<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">
<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.  Delete by selecting a name and confirming with Delete Tab.
      </h3>
    </div>
    <div v-for=" (a, index) in array">
      :selElement = {{a}}
      :selIndex = {{index}}
        {{a}} - index: {{index}}
    </div>
    <p><br></p>
    <form class="form-horizontal" @submit.prevent="doEditDel()">
      <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-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; background-color:green">Edit</button>
         <button v-if="deleting" type="submit" class="col-xs-12 btn btn-success"  style="width:300px; background-color:orange">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>
        ...

JavaScript

new Vue({
	el: '#app',
  data: {
    addText: '',
    selElement: {},
    selIndex: '',
    editText: '',
    editId: '',
    editing: false,
    deleting: false,
    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);
       highestId = 0
       if ( this.array.length > 0)
           {
           	highestId = Math.max.apply(Math, this.array.map(function(p) { 
      	   	return p.id;
           	}))};
  		//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, index) {
    //console.log('In getName - selArrayElement: ' +JSON.stringify(selArrayElement + ' - index: ' + index))
      this.selElement = selArrayElement;
      this.selIndex = index
      this.editText = selArrayElement.name;
      this.editId=selArrayElement.id;
      this.editing=true;
    //console.log('In getName - editId: ' + this.editId)  
    },
    
    delGetName: function (selArrayElement,  index) {
   console.log('In delGetName - selArrayElement: ' +  JSON.stringify(selArrayElement) + ' - indx: ' + index)  
    this.deleting=true
    this.getName (selArrayElement, index)
    //this.doEditDel ()
		},
    
    doEditDel: function () {
    console.log('In doEditDel - editing/deleting: ' + this.editing + ' / ' + this.deleting)
    console.log('In doEditDel - selElement: ' 		             +JSON.stringify(this.selElement) + ' - selIndex: ' + this.selIndex)
    	if (this.deleting)
      	{this.del()};
     if (this.editing) 
        {
        console.log('Still in doEditDel to complete the Edit')
        Vue.set(this.selElement, 'name', this.editText);
        this.editText = '';
    ...