taniarascia / vue-tutorial Goto Github PK

Pressing the Cancel button to get out of edit mode results in the row being updated to the input values, rather than reset to the initial values for that row.
e.g. Edit -> update a field -> Cancel, the values you changed remain changed & are saved

I fixed this using the following:

EmployeeTable.vue

    ...

    <td v-if="editing === employee.id">
        ...
        <button class="muted-button" @click="cancelEdit(employee)">Cancel</button>
    </td>
    <td v-else>
        <button @click="editMode(employee)">Edit</button>
        ...
    </td>

    ...

    editMode(employee) {
        this.cachedEmployee = Object.assign({}, employee);
        this.editing = employee.id;
    },
    cancelEdit(employee) {
        Object.assign(employee, this.cachedEmployee);
        this.editing = null;
    },

    ...

EmployeeTable.vue, added

<button @click="editMode(employee)" :disabled="editing != null">Edit</button>
<button @click="$emit('delete:employee', employee.id)" :disabled="editing != null">Delete</button>

and in the style part:

button:disabled {
opacity:0.4;
}

Hi!
I want to help to fix some small issue:
https://prnt.sc/o01yvl

I suggest the colution:
https://prnt.sc/o00qrg
+
https://prnt.sc/o01xy8

(And if to be perfectionist: http://prntscr.com/o024nt)

Thank you for your work, Tania!