VueJS: render new component after click

Question

I'd like to render new component in vue.js as if it's new page.

I'm trying to do it with something called "dynamic component"

parent: Post.vue
child: Detail.vue

so, if one of the posts is clicked, Post is off and Detail is on.

The thing is I have to send clicked post's id to the Detail.

Here's some of my code.

Post.vue


<template>
  <div>
    <div v-if="loading">
      loading...
    </div>
    <div v-else class="container">
      <ul>
        <li v-for="(post, index) in filteredPosts" v-bind:key="post.no">
            <section class="post__main">
              <div @click..?? class="main__title">{{post.title}}</div>
            </section>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
    created() {
      axios.get(this.url, {
        params: {
          page: this.page,
          ord: this.ord,
          category: []
        }
      }).then(res => {
        this.posts = res.data.list;
        this.loading = false;
        this.page++;
      });

Detail.vue

<template>
    <div>
        {{contents}}
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'Datail',
    data() {
        return {
            req_no: null,
            contents: {}
        }
    },
    created() {
      axios.get(url, {
        params: {
          req_no: this.req_no
        }
      }).then(res => {
          this.contents = this.res.data
      });
    }
}
</script>

I feel like I can do it with props and v-if. Can someone help me? Thanks!

'as if it's new page.' You might want to look into vue-router — Frank
– Frank, Commented May 16, 2019 at 9:29
@Frank I've looked through it, but as I have to get the data with Ajax, it seems not applicable. — Soomin Shin
– Soomin Shin, Commented May 16, 2019 at 9:33

Krantisinh · Accepted Answer · 2019-05-16 11:56:02Z

3

Once a post is clicked, pass post id to the click handler. In the click handler, route to detail.vue passing post id as route param.

like below:

  <li v-for="(post, index) in filteredPosts" v-bind:key="post.no">
      <section class="post__main">
          <div @click="onPostClick(post.id)" class="main__title">{{post.title}}</div>
      </section>
  </li>

And in your click handler:

 onPostClick(id: number) {
        this.$router.push({
            name: 'details',
            params: {
                id
            }
        });
    }

This will work provided you set up vue router correctly in your app and have a valid route for details.

You can access the post id in details component as follows:

created() {
    this.postId = this.$route.params.id;
}

edited May 16, 2019 at 11:56

answered May 16, 2019 at 9:45

Krantisinh

1,72915 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 04:46:46Z

2

I would take a look at the <component> which takes a prop :to and renders a component, this is good for something like tabs where you are rendering different component from a the same general location on the page without reloading the whole page. See here: https://v2.vuejs.org/v2/guide/components-dynamic-async.html This seems to be a very good use case for you, just pass into the component the props you need.

edited Jul 15, 2022 at 4:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 16, 2019 at 11:53

Michael

5,1488 gold badges37 silver badges60 bronze badges

Collectives™ on Stack Overflow

VueJS: render new component after click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related