title: How to get a specific item and display the details on another page in an array onclick in vuejs
body: <p>I'm new to vue and I'm building a client page with an array of client and onclick of a view button the client details show up on another page. I would like to know how to get the specific detail of an item when click and also how it can be viewed on the client details page. I'm unsure how to proceed.
  Here is the template section.</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1 class='d-flex justify-center pt-15 '&gt;Clients&lt;/h1&gt;
  
      &lt;div class=&quot;mt-15  d-flex justify-space-between ml-10 mr-10&quot;&gt;
        &lt;h2 class=&quot;font-weight-medium&quot;&gt;All Clients&lt;/h2&gt;
      &lt;NuxtLink :to=&quot;addClient&quot; class=&quot;nuxtLink&quot;&gt; &lt;v-btn rounded class='primary button ml-10' style=&quot;text-transform:initial; &quot;&gt;
      Add New&lt;/v-btn&gt;&lt;/NuxtLink&gt;
      &lt;/div&gt;
  
      &lt;p class=&quot;font-weight-regular&quot; v-if=&quot;clients.length === 0&quot;&gt;
        You have no clients. Click the add new button to send add a new client.
      &lt;/p&gt;
  
  
      &lt;div v-else&gt;
  &lt;v-simple-table class=&quot;ml-10 mr-10 mt-10&quot;&gt;
      &lt;template v-slot:default&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th class=&quot;text-left&quot;&gt;
              Image
            &lt;/th&gt;
            &lt;th class=&quot;text-left&quot;&gt;
              Name
            &lt;/th&gt;
            &lt;th class=&quot;text-left&quot;&gt;
              Location
            &lt;/th&gt;
            &lt;th class=&quot;text-left&quot;&gt;
              Date
            &lt;/th&gt;
            &lt;th class=&quot;text-left&quot;&gt;
              Action
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr 
            v-for=&quot;item in clients&quot; 
            :key=&quot;item.name&quot;
          &gt;
          &lt;td&gt;{{ item.image }}&lt;/td&gt;
            &lt;td&gt;{{ item.name }}&lt;/td&gt;
            &lt;td&gt;{{ item.location }}&lt;/td&gt;
                      &lt;td&gt;{{ item.date }}&lt;/td&gt;
                                &lt;td style=&quot;text-decoration: none;&quot; class=&quot;td-action&quot;&gt;
                                  &lt;NuxtLink :to=&quot;clientDetail&quot; class=&quot;nuxtLink&quot; @click=&quot;viewDetail(item)&quot;&gt;{{ item.action }}&lt;/NuxtLink&gt;&lt;/td&gt;
          &lt;/tr&gt;
         
         &lt;add-client/&gt;
        &lt;/tbody&gt;
      &lt;/template&gt;
    &lt;/v-simple-table&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  </code></pre>
  <p>And this is the script</p>
  <pre><code>
  &lt;script&gt;
  
  export default {
    name: 'index',
  
    data: () =&gt; {
      return {
         clientDetail: '/clients/client-detail',
        addClient: '/clients/add-client',
        
        clients:[
        {
              name: 'Cina',
              location: 'Tema',
              date: '13/03/2021',
              action: 'View',
               image: ''
            },
              {
              name: 'Fina',
              location: 'Sakumono',
              date: '12/03/2021',
              action: 'View',
               image: ''
            },
            
            {
              name: 'Mina',
              location: 'Tema',
              date: '13/03/2021',
              action: 'View',
               image: ''
            },
            {
              name: 'Zina',
              location: 'Tema',
              date: '13/03/2021',
              action: 'View',
               image: ''
            },
             {
              name: 'Ama',
              location: 'Tema',
              date: '13/03/2021',
              action: 'View',
               image: ''
            },
            
  
        ]
      }
    },
    methods:{
      viewDetail(item){
       item
      }
  }
  &lt;/script&gt;
  
  </code></pre>