api - 如何在父级中获取正确的数组对象

Question

在我的应用程序中，我有一个父组件，它查询一个 api 来填充一个对象数组。然后将这些具有不同属性的对象通过 v-for 循环传递给多个子组件。在子组件中，我可以通过带有文本输入的表单来编辑对象的某些属性。使用 @change 我将它发送给父级，因此我可以在那里编辑对象并将其发布到 api。但是，如何在数组中找到正确的对象？

我可以循环父中的数组以根据 id（属性之一）找到正确的对象，但这对我来说似乎很慢。有没有办法直接得到正确的对象？还是我让 api 调用子组件中的更新？这似乎不合逻辑，因为父级不会知道对象已更改？

标签： apivue.jsvue-componentemit

Answer 1

在 v-for 循环中，您可以访问数组中的元素索引

<div v-for="(item, i) in items" @change="update(item, i)"></div>

<script>
export default {
    data() {
        return {
             myArray: [{}, {}]
        }
    },
    methods: {
        update(item, i) {
            this.myArray[i] = item
        }
    }


}
</script>

https://jsfiddle.net/rfxtpua1/