when using v-bind:is to switch components, how to bind properties to transfer data at this time?
<div id="exp">
<tab-btn v-for="tab in tabs" :key="tab.id" :tab="tab">
</tab-btn>
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
</div>
switch components by changing currentTabComponent
Vue.component("posts-component", {
props: ["posts", "currentPost"],
template: `
<div @post-change="currentPost = $event" :posts="posts" :currentPost="currentPost">
<ul>
<li v-for="post in posts" @click="$emit("post-change", post)">
{{ post.title }}
</li>
</ul>
<div>
<p v-if="!currentPost">Click on a blog to view it.
<div v-else>
<h1>{{ currentPost.title }}</h1>
{{ currentPost.content }}
</div>
</div>
</div>
`
});
let app = new Vue({
el: "-sharpexp",
data: {
tabs: [
{ name: "Posts", id: 1 },
{ name: "Archive", id: 2 }
],
chose: "Posts",
posts: [
{ title: "Cat Ipsum", content: "fuck" },
{ title: "Hipster Ipsum", content: "fuck2" },
{ title: "Cupcake Ipsum", content: "fuck3" }
],
currentPost: null,
},
computed: {
currentTabComponent() {
return this.chose.toLowerCase() + "-component";
},
}
});
but what if I can"t access posts and currentPost, in data at this time, both of which are undefined,?