How can I target elements in a table cell using vuejs?

user_6462490 0
Viewed 2588

I have a table that is dynamically being rendered with data in a readonly input box in each cell. In the first cell, there is an edit button. When the user clicks edit, the readonly on the input boxes should be disabled so data can be entered in each cell. The edit button should be hidden and the save button should show. When the user clicks save, it should call a method that can use the data (save to a database or something).

I thought I could use the event and drill down to the target but it's an array and I'm not sure what to do. Any ideas?

<div id="app">
<table border=1 width=100%>
  <tr>
    <td width=10px>EDIT</td>
    <td>Program</td>
    <td>Company</td>
    <td>Funding</td>
    <td>Funded</td>
    <td>Recruit</td>
  </tr>
  <tr v-for="program in programs">
    <td><button class="show" v-on:click="editItem($event)">edit</button>&nbsp;<button class="hide">save</button></td>    
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.program"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.company"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.funding"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.funded"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.Recruit"></td>
  </tr>
</table>
</div>

new Vue({
  el:"#app",
  data() {
    return {
      test:"hello",
      programs:"",
      hide:true
    }
  },
  created: function(){
    this.getPrograms();
  },
  mounted: function(){

  },
  methods: {
    getPrograms: function(){
     axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then((response) => {
        this.programs = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    editItem: function(e){     
      console.log(e)
       //console.log(e.target.parentElement.parentNode.parentElement.HTMLCollection) doesn't work
      alert("Make line item editable for editing and then saving")
    }
  }
})

Here's the pen for reference

vuejs2 vue.js html-table javascript
4 Answers

i forked your pen here or try it like this:

Vue.config.devtools = false
Vue.config.productionTip = false

new Vue({
  el:"#app",  
  filters: {
    toCapitalize (text) {
      return text.charAt(0).toUpperCase() + text.slice(1)
    }
  },  
  data () {
    return {
      columns: [
        'program', 'company', 'funding', 'funded', 'Recruit'
      ],
      programs: []
    }
  },
  created () {
    this.getPrograms()
  },
  methods: {
    getPrograms () {
      axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs")
        .then(response =>
          // adding prop isEditable for each object    
          this.programs = response.data.map(program => ({ isEditable: false, ...program }))
        )
        .catch(error => console.log(error))
    },
    // using index of the current program to toggle the property isEditable
    editItem (index) {
      this.programs[index].isEditable = !this.programs[index].isEditable
    }
  }
})
.editable {
  border: 2px solid green
}
.button-action {
  min-width: 3rem
}
input {
  width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

<div id="app">
  <table border=1 width=100%>
    <tr>
      <td width=10px>EDIT</td>
      <td v-for="(column, indexColumn) in columns" :key="indexColumn">
        {{ column | toCapitalize }}
      </td>
    </tr>
    <tr v-for="(program, indexProgram) in programs" :key="indexProgram">
      <td>
        <button 
          @click="editItem(indexProgram)"
          class="button-action"
        >
          {{ program.isEditable ? 'save' : 'edit' }}
        </button>
      </td>    
      <td v-for="(column, indexColumn) in columns" :key="indexColumn">
        <input        
          v-model="program[column]"
          :readonly="!program.isEditable"
          :class="{ 'editable': program.isEditable }"
        >
      </td>
    </tr>
  </table>
</div>

user_108726840

When you retrieve a list of programs add an extra property that will indicate if row is in edit mode:

axios.get(url).then (response => {
    this.programs = response.data.map(item => {
        ...item,
        isEditing: false
    })
})

Also programs should be initialized to an empty array instead of empty string.

In editItem method, instead of event object you will pass an reference to item and then set isEditing to true

editItem(item) {
    item.isEditing = true
}

Then you can create method that will retrieve if row input is in readonly mode:

isReadOnly(item) {
    return item.isEditing ? false : "readonly";
}

Then bind this method to readonly attribute

<input type="text" :readonly="isReadOnly(item)" />

Avoid using node references and try to solve problem with binding. For example you can bind button title to method and return "Save" or "Edit" value depending on isEditing state.

Edin_490770

Have a property to keep track of which program row is being edited.
You can accomplish this by using your already available program.id property

The editingId vm property indicates which "program" is being edited. If the property is set to other than null, the readonly attribute will be false and the button is toggled from edit to save. If the editingId property is set to null, the table goes back to normal view mode.

I implemented a saveItem v-on:click callback to the save button just to set the editingId property back to null, to fully illustrate how it works. You can define the callback however you want, but remember to set the editingId property to null to get out of edit mode.

Here is the edited pen

user_70296180

Add a readonly attribute to the elements in an array. Upon clicking the edit button, set the readonly attribute of the elements in the array to false.

user_122799900
Related