Use a Vue component for multiple templates

Question

I'm fairly new to Vue and I'm not even sure if I've phrased my question correctly. Here is what I am trying to achieve. I am using a card cascade from bootstrap, each card show part of a blog post. Each card has a link to a webpage for the whole blog.

To try and achieve this I have two vue files. cardCascade.vue and singleBlog.vue. My problem is at the moment I have to create a different singleBlog.vue files for each blog I have.

For example, suppose I have two blog posts in my database. cardCascade.vue will also have two links to individual blog posts. Blog post 1 will then use singleBlog1.vue and blog post 2 will then use singleBlog2.vue

What can I do so that I can achieve this more efficiently such that I only need one singleBlog.vue and it dynamically adjusts the content based on the link I select from cardCascade.vue?

What I have right now for parts of the cardCascade.vue

<b-card v-for="blog in blogs_duplicate" title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
        <b-card-text>
          <!--{{getBlogOfType("Vue",blog.id)}}-->
          {{getBlogOfType("Vue",blog.id)}}
        </b-card-text>
        <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
      </b-card>

Below is what I have right now for singleBlog.vue, keep in mind right now it just displays all the blog posts in a list.

<template>
  <div id="single-blog">
    <ul>
      <article>
        <li v-for="blog in blogs" v-bind:key="blog.id">
          <h1>{{blog.title}}</h1>
          <i class="fa fa-cogs" aria-hidden="true"></i>
          <router-link v-bind:to="{name:'datascience-single', params: {blog_id: blog.blog_id}}">
            <p>{{blog.content}}</p>
          </router-link>
        </li>
      </article>
    </ul>
  </div>
</template>

<script>
import db from './firebaseInit'
export default{
  data(){
    return{
      id:this.$route.params.id,
      blogs:[],
    }
  },
  created(){
    //this.$http.get('http://jsonplaceholder.typicode.com/posts/' + this.id).then(function(data){
      //this.blog = data.body;
     db.collection('Blogs').orderBy('Type').get().then(querySnapshot =>{
       querySnapshot.forEach(doc => {
         //console.log(doc.data());
         const data={
           'id': doc.id,
           'content': doc.data().Content,
           'type': doc.data().Type,
           'title': doc.data().Title,
           'blog_id':doc.data().blog_id,
         }
        this.blogs.push(data)
       })
     })
    }
  }
</script>

Michael · Accepted Answer · 2019-06-04 14:19:14Z

1

It seems as though you should be giving your common component as a props information as to what it is rendering. Meaning you would make the call to the api in the parent and then make your child a "dumb" component. In your case you should make the calls to the api in cardCascade and then pass into your singleBlog component an id as props. Although in your case I do not see you using this component in the parent at all, where is it?

answered Jun 4, 2019 at 14:19

Michael

5,1588 gold badges37 silver badges60 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 02:28:47Z

0

Like Michael said, the right way to do that is making a props and receives that prop from your router. Then, when you make your requisition, you'll pass this prop id. You can read more about props in here: https://v2.vuejs.org/v2/guide/components-props.html

edited Jul 15, 2022 at 2:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 4, 2019 at 16:55

carlosza

3952 silver badges15 bronze badges

Collectives™ on Stack Overflow

Use a Vue component for multiple templates

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