Currently, I am using a template like this:
<div>
<div v-for="(item, key) in items" :key="key">
<div>
<input type="text" :value="item.title">
</div>
<div>
<input type="text" :value="item.description">
</div>
<div class="actions">
<button type="button" @click="discardChanges(item)" :disabled="!itemChanged">Discard changes</button>
<button type="button" @click="sendChanges(item)" :disabled="!itemChanged">Save</button>
</div>
</div>
</div>
<script type="text/javascript">
export default {
data() {
return {
itemChanged: false,
items: [
{
title: "Apple",
description: "The biggest company in the world"
},
{
title: "Amazon",
description: "The biggest online store in the USA"
},
]
}
},
methods: {
sendChanges(item) {
// Send API request to update item
},
discardChanges(item) {
// Set old value if item changed
}
}
}
</script>
This setup generates dynamic inputs from an array of items. It is important to correctly manage the behavior of the action buttons based on changes made to each current item.
For instance, if a user modifies the title of the second item and clicks on the Discard changes button, how can we revert back to the original value?
In addition, how do we effectively disable or enable action buttons by comparing ch