Javascript 如何更新vueJs数组列表的特定行？

有没有合适的方法可以在不重新加载所有数据的情况下刷新vueJS数组列表中的一个特定行

在本例中，它是一个电话列表

<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)

                // how to update with reloading all the phone list?
                // ...
            }
        }
    }
</script>

{{电话号码}}
{{phone.comment | truncate（90）}
导出默认值{
数据（）{
返回{
电话=[
{id:1，编号：'001 656 88 44'，注释：'}，
{id:2，编号：'610-910-3575 x2750'，注释：'Quod odit quia'}，
{id:3，号码：'536.224.2639 x714'，注释：'primary phone'}，
{id:5，号码：'0034556577'，注释：'home phone'}，
]
}
},
方法：{
编辑（id）{
//使用返回更新数据的api进行更新。
var updatedPhone=更新（id）
//如何通过重新加载所有电话列表进行更新？
// ...
}
}
}

PS：这是一段代码，仅用于演示问题

const currentIndex = this.phones.findIndex(p => p.id === id);
this.phones.splice(currentIndex, 1, updatedPhone)

如果目标环境不支持数组上的findIndex，则可以使用其他方法查找当前索引。一个是通过电话，而不是它的id

edit(phone) {
    const currentIndex = this.phones.indexOf(phone);

    // update using an api that returns the updated data.
    var updatedPhone = update(phone.id)

    this.phones.splice(currentIndex, 1, updatedPhone)
}

---

在这两种情况下，Vue都会检测到更改并为您重新渲染。

您可以使用内置索引生成：

    <tr v-for="(phone, index) in phones">
        <td @click="edit(index)">
            {{phone.number}}
        </td>
        <td class="pointerCursor" @click="edit(index)">
            {{phone.comment | truncate(90)}}
        </td>
    </tr>

    methods: {
        edit(index) {
            phone = this.phones[index];

            // update using an api that returns the updated data.
            var updatedPhone = update(phone.id)

            // how to update with reloading all the phone list?
            this.phones.splice(index, 1, updatedPhone)
        }
    }