I have successfully generated a user table using data retrieved from an ajax request. The table has a structure similar to this: [Image of Table][1]
Now, when an admin makes changes to a user's username, I want the respective row to update with the new information, specifically the user's first name and last name.
Although I have properly implemented the table and the models are functioning correctly, I am facing an issue with updating the target row with the edited data. How can I achieve this?
I have tried the following methods, but they did not work:
- How to update a particular row of a vueJs array list?
- https://v2.vuejs.org/v2/guide/list.html#Caveats
- I have ensured that each row has a unique key
- Attempted to update the listOfUsers using Vue.set()
- Also tried using Vue.set() instead of splice
Below is a snippet of my parent vue component code with irrelevant details removed:
TEMPLATE:
<table>
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Created</th>
<th>Stat</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in listOfUsers" :key="'row' + user._id">
<td>{{user.first_name + ' ' + user.last_name}}</td>
<td>{{user.email}}</td>
<td>{{user.created}}</td>
<td>
<a v-if="user.confirmed" @click="determineButtonClicked(index, 'confirm')"></a>
<a v-else @click="determineButtonClicked(index, 'unconfirm')"></a>
</td>
<td class="buttonCase">
<a @click="determineButtonClicked(index, 'info')"></a>
<a v-if="user.blocked" @click="determineButtonClicked(index, 'blocked')"></a>
<a v-else @click="determineButtonClicked(index, 'block')"></a>
<a v-if="user.enforce_info === 'required'" @click="determineButtonClicked(index, 'enforceInfoActive')"></a>
<a v-else-if="user.enforce_info === 'done'" @click="determineButtonClicked(index, 'enforceInfoChecked')"></a>
<a v-else @click="determineButtonClicked(index, 'enforceInfo')"></a>
<modal v-if="usersList[index]" @toggleClickedState="setState(index)" @editUser="edit(index, $event)" :id="user._id" :action="action"></modal>
</td>
</tr>
</tbody>
</table>
SCRIPT
<script>
export default {
created: function() {
let self = this;
$.getJSON("/ListOfUsers",
function(data){
self.listOfUsers = data;
});
},
data: function() {
return {
listOfUsers: [],
}
},
methods: {
edit(index, update){
let user = this.listOfUsers[index];
user.firstName = update.firstName;
user.lastName = update.lastName;
// this.listOfUsers.splice(index, 1, user)
this.listOfUsers.$set(index, user)
}
}
}
</script>
Thank you for your valuable time and assistance! [1]: https://i.sstatic.net/lYQ2A.png