I created a dynamic table using Vuejs, where each cell contains an input element set as readOnly initially. The table also includes an 'edit' button for each row, which, when clicked, changes to 'save' and allows editing of the input elements in that specific row. I am trying to capture both the new and previous values entered after clicking save. One particular challenge I'm facing is with formatting dates - the date field is originally in this format 2019-10-10T07:00:00Z, but I want it displayed as mm/dd/yy. Although Moment.js helps me format the date successfully, the value doesn't seem to stay consistent after alerting it. Any suggestions on what I might be doing wrong? Perhaps I need to rethink my approach due to the necessity of extracting the new and previous values for each field.
<div id="app">
<table border=1 width=100%>
<tr>
<td>EDIT</td>
<td v-for="editableKey in editableKeys" :key="editableKey" class="label">{{ editableKey }}</td>
</tr>
<tr v-for="(program, index) in programs">
<td><button v-if="program.isReadOnly" v-on:click="editItem(program)">edit</button> <button @click="saveItem(program)" v-else>save</button></td>
<td><input type="text" v-bind:data-id="program.id" :readonly="program.isReadOnly" v-model="formatDate(program)"></td>
<td><input type="text" v-bind:data-id="program.id" :readonly="program.isReadOnly" v-model="program.company"></td>
<td><input type="text" v-bind:data-id="program.id" :readonly="program.isReadOnly" v-model="program.funding"></td>
<td><input type="text" v-bind:data-id="program.id" :readonly="program.isReadOnly" v-model="program.funded"></td>
<td><select :class="bgColor(program)" type="text" v-bind:data-id="program.id" :disabled="program.isReadOnly" v-model="program.Recruit">
<option>Internal</option>
<option>Recruiting</option>
</select>
<!--<input :class="bgColor(program)" type="text" v-bind:data-id="program.id" :readonly="program.isReadOnly" v-model="program.Recruit">--></td>
<td><input type="text" v-on:change="" v-bind:data-id="program.id" :readonly="program.isReadOnly" v-model="program.program"></td>
</tr>
</table>
</div>
new Vue({
el:"#app",
data:() => ({
programs:[],
editableKeys: ['date', 'company', 'funding', 'funded', 'recruit', 'program'],
}),
created () {
this.getPrograms();
},
methods: {
getPrograms() {
axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then(response => {
this.programs = response.data.map(program => ({
...program,
isReadOnly: true
}));
}).catch(error => {
console.log(error);
});
},
editItem (program) {
program.isReadOnly = false
},
saveItem (program) {
program.isReadOnly = true
console.log(program)
alert("New Value: "+program.Date)
alert("Previous Value: "+program.Date)
},
bgColor (program) {
return program.funded === program.funding ? 'yellow' : 'white'
},
formatDate(program){
var formatL = moment.localeData().longDateFormat('L');
var format2digitYear = formatL.replace(/YYYY/g,'YY');
return moment(program.Date).format(format2digitYear);
},
updateField(program){
console.log(program)
alert(program)
}
}
})
For more clarity, here's a link to the CodePen demo. Any help or insights provided would be greatly appreciated.