I am facing an issue with a dynamically rendered table where each cell contains data in a readonly input box. The first cell has an edit button, and when clicked, the input boxes should become editable for user input. The edit button should then be hidden, and a save button should appear. Upon clicking save, a method needs to be triggered to handle the saved data, such as storing it in a database.
I attempted to access the event and target but encountered an array that I'm not sure how to handle. Any suggestions on how to approach this?
<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> <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")
}
}
})
For further reference, here's the link to the pen.