VueJS - How to make components completely dynamic without any hard-code in it

Question

Well, i am new to vuejs and i am working on a project where every data/contents is taken from the RestAPI. So, now i want to make my components completely dynamic without any hard-coding and just use the id coming from the API and display the contents accordingly.

Here is my router.js:

 {
      path: '/views/frames',
      name: 'frames',
      component: () => import('./views/frames/App.vue'),
 },
{
  path: '/views/frames/:viewContentId',               <--- Dynamic routing
  name: 'letsCheck',
  component: () => import('./views/frames/Contents.vue')
}

Here is my App.vue:

 <div class="vx-row">
    <div class="vx-col w-full md:w-1/2 mb-base" v-for="info in infos" :key="info.id">
          <vx-card>
        

 <div class="header">
          <div class="left">
            <img src="./img/info_8_logo.png" alt=""/>                  <-- Hard_coded value ie 8
            <b>{{info.name}}</b>
          </div>
          <div class="right">
            <vs-button @click="$router.push({name: 'letsCheck', params: {viewContentId: '8' }}).catch(err => {})">Explore</vs-button> 
                          <-- Above as a Hard-coded value ie 8 -->
              {{mes.this_is_showing_only_data_of_id8}}       
          </div>
        </div>
          </vx-card>
      </div>
    </div>

<script>
infos: [],
mes: []
...
created () {
  this.$http.get('/infos')                                           
    .then((response) => { this.infos = response.data })
    .catch((error) => { console.log(error) })
   
  this.$http.get('/messages/8/tick')                                  <-- Hard-coded value
    .then((response) => { this.mes = response.data })
    .catch((error) => { console.log(error) })

}
</script>

Currently from these following codes i am displaying 8 cards in the first page, which gets the same contents of the id=8 as i have hard coded it in App.vue ie (mes). But i want to make it dynamic without using any of the ids directly, rather the code should use the id which is coming from the API /infos and then display contents accordingly.

And when button is clicked in the App.vue, suppose say user have clicked it in 3rd card, then the components.vue must assign id=3 and display the contents.

Please help me in this I'm stuck here!

omerS · Accepted Answer · 2021-01-13T08:41:00.500

1

If I understand correctly you want to click on a card to go to it's details.

You can do something like this in your dom:


<vs-button @click="goToDetails(info.id)">Explore</vs-button>

and in your script on the same file:


methods: {
 gotoDetails(id) {
      this.$router.push({ name: 'letsCheck', params: {id}})
    }
}

Also if your API has an endpoint something like detail just make a created method to get ID (look at below code) and send your get request and display only that card in your component.


data() {
    return {
       infoDetail: null
    }
},

created () {
  this.$http.get(`/infos/${this.$route.params.id}`)                                           
    .then((response) => { this.infoDetail = response.data })
    .catch((error) => { console.log(error) })
}

edited Jan 13 '21 at 08:41

answered Jan 13 '21 at 08:30

omerS

817
2
9
21

Thank you so much i will just check it and let you know, i wanted to know one more thing that the id coming from the API response is a Number, so how do i convert that into a string and pass it HTML and other scripts. – Quantum Jan 13 '21 at 08:53
it is in your infoDetail object now. So whenever you want to use it just use toString() method to make it string – omerS Jan 13 '21 at 09:05

score 1 · Answer 2 · answered Jan 13 '21 at 08:59

In the first place many of your questions have been answered here How do i use the id coming from the API response in other parts of HTML & Scripts in VueJS.

Now for letsCheck component dynamic building:

{
  path: '/views/frames/:viewContentId',               
  name: 'letsCheck',
  component: () => import('./views/frames/Contents.vue'),
  props: (route) => {
        const viewContentId = route.params.viewContentId.toString()
        return { viewContentId }
      },
}

Components.vue

props: {
    viewContentId: {
      type: String,
      required: true,
    },
  },

Then in the component you can use the viewContentId to do any api call with this is which is the id from the router and render dynamically the template

VueJS - How to make components completely dynamic without any hard-code in it

2 Answers2