How do I make @click of a div that is receiving looped data of an API the div popups a window showing the rest of the keys in each object in the API

Question

<div 
  :style="image"
  class="main-browse">
  <div
    class="names"
    v-for="(user) in getUsers" 
    :key="user.id">
    <div
      id='user'
      :style="{backgroundColor: getColors}">
      <div>{{user.name}}</div>
    </div>
  </div>
  </div>

The div with {{user.name}} when clicked I want it to show the rest of the details in the Api like user.email, user.occupation, in a new window, Api data is coming from store.

am still new to vuex.

Answer 1

Add click event listener to div with .native modifier if you are using Vue 2 or without if you are using Vue 3 (docs). In event handler function open your app in a new window with the proper route path.

<div 
  :style="image"
  class="main-browse"
>
  <div
    class="names"
    v-for="(user) in getUsers" 
    :key="user.id"
  >
    <div
      id='user'
      :style="{backgroundColor: getColors}"
      @click="clickHandler"
    >
      <div>{{user.name}}</div>
    </div>
  </div>
</div>

...
methods: {
  clickHandler () {
    const url = new URL(window.location.href); 
    // there you can edit your current location or leave it as it is
    window.open(url.href, '_blank'); 
  }
}
...

Also you can append to your route an id of an instance you want to display info about (e.g. 'mySuperApp.com/users/232344'). Then you obtain it by calling in your component $route.params.id and then retrieve info from your Vuex store by that user id.