如何使正在接收 API 循环数据的 div 的 @click 弹出 window 显示 window 中每个对象中的其余键=10=]

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>

单击时带有 {{user.name}} 的 div 我希望它显示 Api 中的其余详细信息，例如 user.email、user.occupation，在新的 window 中，Api 数据来自商店。

我对 vuex 还是个新手。

Answer 1

如果您使用的是 Vue 2，则使用 .native 修饰符将 click 事件侦听器添加到 div，如果您使用的是 Vue 3 (docs)，则不添加。在事件处理函数中，使用正确的路由路径在新的 window 中打开您的应用程序。

<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'); 
  }
}
...

你也可以在你的路线上附加一个 id 你想要显示信息的实例（例如 'mySuperApp.com/users/232344'）。然后通过调用组件 $route.params.id 获取它，然后通过该用户 ID 从 Vuex store 检索信息。

如何使正在接收 API 循环数据的 div 的 @click 弹出 window 显示 window 中每个对象中的其余键=10=]

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

javascript

api

object

vue.js

vuex