[Vuejs]-VueJS – How to make components completely dynamic without any hard-code in it

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) })
}

1πŸ‘

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

Leave a comment