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="editPerson(person)">edit</button>
                    <button v-show="person.edit" v-on:click="savePerson(person)">save</button>
               </td>
          </tr>
     </table>

</div>

CSS

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

JavaScript

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

          savePerson: function(person){
               person.edit = false;
          }
     }
})