Would you happen to know the correct way to refresh a specific row from a vueJS array list without having to reload all the data?
In this particular scenario, we are dealing with a phone list.
<template>
<table class="table">
<tr v-for="phone in phones">
<td @click="edit(phone.id)">
{{phone.number}}
</td>
<td class="pointerCursor" @click="edit(phone.id)">
{{phone.comment | truncate(90)}}
</td>
</tr>
</table>
</template>
<script>
export default {
data () {
return {
phones = [
{id:1, number: '001 656 88 44', comment:''},
{id:2, number: '610-910-3575 x2750', comment:'Quod odit quia'},
{id:3, number: '536.224.2639 x714', comment:'primary phone'},
{id:5, number: '0034 556 65 77', comment:'home phone phone'},
]
}
},
methods: {
edit(id) {
// update using an api that returns the updated data.
var updatedPhone = update(id)
// what is the best approach for updating without reloading the entire phone list?
// ...
}
}
}
</script>
PS: Please note that this example code is solely for illustration purposes regarding the issue at hand.