title: VueJS - How to make components completely dynamic without any hard-code in it
body: <p>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.</p>
  <p>Here is my router.js:</p>
  <pre><code> {
        path: '/views/frames',
        name: 'frames',
        component: () =&gt; import('./views/frames/App.vue'),
   },
  {
    path: '/views/frames/:viewContentId',               &lt;--- Dynamic routing
    name: 'letsCheck',
    component: () =&gt; import('./views/frames/Contents.vue')
  }
  </code></pre>
  <p>Here is my App.vue:</p>
  <pre><code> &lt;div class=&quot;vx-row&quot;&gt;
      &lt;div class=&quot;vx-col w-full md:w-1/2 mb-base&quot; v-for=&quot;info in infos&quot; :key=&quot;info.id&quot;&gt;
            &lt;vx-card&gt;
          
  
   &lt;div class=&quot;header&quot;&gt;
            &lt;div class=&quot;left&quot;&gt;
              &lt;img src=&quot;./img/info_8_logo.png&quot; alt=&quot;&quot;/&gt;                  &lt;-- Hard_coded value ie 8
              &lt;b&gt;{{info.name}}&lt;/b&gt;
            &lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;
              &lt;vs-button @click=&quot;$router.push({name: 'letsCheck', params: {viewContentId: '8' }}).catch(err =&gt; {})&quot;&gt;Explore&lt;/vs-button&gt; 
                            &lt;-- Above as a Hard-coded value ie 8 --&gt;
                {{mes.this_is_showing_only_data_of_id8}}       
            &lt;/div&gt;
          &lt;/div&gt;
            &lt;/vx-card&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script&gt;
  infos: [],
  mes: []
  ...
  created () {
    this.$http.get('/infos')                                           
      .then((response) =&gt; { this.infos = response.data })
      .catch((error) =&gt; { console.log(error) })
     
    this.$http.get('/messages/8/tick')                                  &lt;-- Hard-coded value
      .then((response) =&gt; { this.mes = response.data })
      .catch((error) =&gt; { console.log(error) })
  
  }
  &lt;/script&gt;
  </code></pre>
  <p>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.</p>
  <p>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.</p>
  <p>Please help me in this I'm stuck here!</p>