从 nuxt.js 中引用的子元素列表中访问单个元素

Question

我对 nuxt 或 vue 不太熟悉，但我一直在从文档和示例中学习。
我尝试搜索了很多文章，但找不到一个简单的方法来做到这一点

我的组件是

<template>
    <div ref="parent">
        <div v-for="post in posts" v-bind:key="post.id">{{ post.title }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            posts: [
                {id: 1, title: 'title 1'},
                {id: 5, title: 'title 2'},
                {id: 7, title: 'title 3'}
            ]
        };
    },
    methods: {
        doSomething(){
            // I have to use the index of div but I want to use post.id
            const div = this.$refs.parent.children[0];
        }
    }
};
</script>

现在我想在post.id 的帮助下访问我的参考 div 的子元素 目前我正在使用索引访问子元素。

会有很多子元素，所以我不想添加对所有子元素的引用。

示例中的组件是一个子组件，我在父组件中访问它的方法并从那里传递post.id 作为doSomething(post.id) 方法中的参数

有人可以指导我吗？
提前致谢

Answer 1

将 ID 传递给方法，然后使用它从 data() 中声明的数组中检索要更改的元素。

<template>
    <div ref="parent">
        <div v-for="post in posts" v-bind:key="post.id">
           {{ post.title }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            posts: [
                {id: 1, title: 'title 1'},
                {id: 5, title: 'title 2'},
                {id: 7, title: 'title 3'}
            ]
        };
    },
    methods: {
        doSomething(id){
           this.posts.map(x => {
               if(x.id === id){
                  //edit X here, where x is the post
                  console.log(x,'here I am');
               }
            return x
          });
        }
    }
};
</script>

希望这会有所帮助！