javascript - How to update a particular row of a vueJs array list? -

is there proper way refresh 1 particular row vuejs array list without reloading data?

in case, 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 api returns updated data.                 var updatedphone = update(id)                  // how update reloading phone list?                 // ...             }         }     } </script> 

ps: code demonstrate problem.

const currentindex = this.phones.findindex(p => p.id === id); this.phones.splice(currentindex, 1, updatedphone) 

if target environment doesn't support findindex on arrays, can use other means of finding current index. 1 pass phone instead of it's id.

edit(phone) {     const currentindex = this.phones.indexof(phone);      // update using api returns updated data.     var updatedphone = update(phone.id)      this.phones.splice(currentindex, 1, updatedphone) } 

in both cases, vue detect change , re-render you.