我是vue.js的新手，正在为在for循环中显示某些项目的$ vnode.key而苦苦挣扎。
我有一个创建插槽的子组件和一个使用该插槽的父组件。
子组件向p元素列表中的每个项目添加一个键，并为每个元素添加一个键。
我需要一种方法来在控制台中显示每个项目的$ vnode.key，以便我可以确切地确认密钥中的值。
我在父级和子级中尝试了各种方法，但是每当我在控制台中看到vnode数据时，键始终是未定义的。
我尝试使用created：方法，也尝试使用mount：方法来等待模板被渲染。但是我仍然只能看到undefined作为键。
老实说，我不清楚我在看哪个vnode。
我无法解决的是我应该在哪里放置代码，以确保选择正确的vnode以及代码的真正外观。
子组件的代码如下：
<template>
<div>
<div
v-for="post in posts"
v-bind="{post}"
:key="post.id"
>
<slot v-bind="post"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'posts-list',
props: {
posts: {
type: Array,
required: true,
}
},
created () {
console.log('CREATED CHILD VNODE', this.$vnode);
}
}
</script>
父组件的代码如下：
<template>
<div style="background-color: orange;">
<h1>Posts API</h1>
<div v-if="isLoading">
<i class="fa fa-spinner fa-spin"></i>
<!-- <img src="../src/assets/loader.gif"/> -->
Loading.....
</div>
<posts-list
v-if="!isLoading"
:posts="computedPosts"
>
<template slot-scope="post">
<div style="background-color: yellow;padding:5px;">
<!-- <figure>
<img
:src="`https://robohash.org/${post.title}`"
:alt="post.title"
>
<figcaption>
<h3>{{post.title}}</h3>
</figcaption>
</figure>
-->
<h3>{{post.title}}</h3>
<p style="padding:5px;">{{post.body}}</p>
<p style="padding:15px;">{{post.id}}</p>
</div>
</template>
</posts-list>
</div>
</template>
<script>
import PostsList from './PostsList'
import { RepositoryFactory } from './../repositories/RepositoryFactory'
const PostsRepository = RepositoryFactory.get('posts')
export default {
name: "parent-component",
components: { PostsList },
data() {
return {
isLoading: false,
posts: [],
};
},
created () {
this.fetch()
console.log('CREATED POSTS', this.posts);
console.log('CREATED VNODE',this.$vnode);
},
methods: {
async fetch () {
try {
this.isLoading = true
const { data } = await PostsRepository.createPost('the-field')
this.isLoading = false
this.posts = data;
console.log('DATA', data[0]);
//console.log('VNODE KEY', this.$vnode.key);
} catch (error) {
console.error('GOT ERROR', error);
if (error.code == "ECONNABORTED") {
this.isLoading = false;
this.posts = [{'id':'1', 'userId':'1','title':'NO RESULT','body':'timeout'}];
}
else if (error.response.status == 500) {
console.log('GOT 500');
console.error('GOT ERROR CODE', error.code);
console.error('GOT ERROR CODE', error.response.status);
console.error('GOT ERROR CODE', error.response); console.log('GOT DATA', error.response.data[0].body);
this.isLoading = false;
this.posts = [{'id':'1', 'userId':'1','title':'NO RESULT','body':error.response.data[0].body}];
}
}
}
},
computed: {
computedPosts () {
return this.posts.slice(0, 1)
}
},
mounted (){
console.log('PARENT MOUNTED VNODE', this.$vnode);
}
};
</script>
此代码背后的原始想法来自博客文章，我认为这是一个好主意。因此，我正在对其进行调整以适合我的目的。
如果有人感兴趣，则指向博客文章的链接为：