JSFiddle - React, Tailwind, and code Playground

by mckabue

HTML

<div id="list">

     <table>
          <tr v-for="person in people">
               <td>
                    <span v-show="!person.edit">{{person.name}}</span>
                    <input type="text" v-model="person.name" v-show="person.edit">
               </td>
               <td>
                    <span v-show="!person.edit">{{person.age}}</span>
                    <input type="text" v-model="person.age" v-show="person.edit">
               </td>
               <td>
                    <span v-show="!person.edit">{{person.gender}}</span>
                    <input type="text" v-model="person.gender" v-show="person.edit">
               </td>
               <td>
                    <button v-show="!person.edit" v-on:click="person.editPerson()">edit</button>
                    <button v-show="person.edit" v-on:click="person.savePerson()">save</button>
               </td>
          </tr>
     </table>

</div>

CSS

table{ width:100%; }
table td { border:1px solid #ccc }

JavaScript

var _model_ = function(data){
this.name = data.name;
                    this.age = data.age;
                    this.gender = data.gender;
                    this.edit = data.edit;
                    this.editPerson = function(){
               this.edit = true;
          };

          this.savePerson = function(){
               this.edit = false;
          };
                    
};

var officeVM = new Vue({
     el: '#list',
     data: {
          people: [
               new _model_({
                    name: 'jacob',
                    age: '31',
                    gender: 'male',
                    edit: false
               }),
               new _model_({	
                    name: 'Kortni',
                    age: '24',
                    gender: 'female',
                    edit: false
               }),
               new _model_({
                    name: 'Gabbi',
                    age: '2',
                    gender: 'female',
                    edit: false
               })
          ]
     }
})