Vuejs2 获取所单击项目的id，并将其用于在vuejs中创建动态url

我有一个vue引导表，每行显示数组对象的一些属性（通过axios的api调用获得）

每一行都有一个按钮，可以将我重定向到一个详细信息页面，其中包含该对象的更多属性以及一个映射

我正在考虑创建一个函数来获取单击行中包含的对象的属性id，但我不确定该如何做。我需要在api调用的最后一部分中使用它的id

商店的结构是这样的：我有一个用于用户的模块，还有一个用于这些对象（活动）的模块。在这些模块中，我处理状态、动作和突变。一个单独的文件处理getter。由于这些活动将被修改，我也需要保存它们的状态

我还需要能够从其他组件轻松访问单个对象的所有属性（不仅仅是表行中显示的属性）

我感到很困惑

代码如下：

包含所有活动的表：

<b-table
  responsive
  :fields="fields"
  :items="activity"
>
  <template
    slot="actions"
  >
    <b-button
      v-b-tooltip.hover
      title="Mostra dettagli"
      variant="info"
      class="px-3"
      @click="goToActivityDetail"
    >
      <span class="svg-container">
        <svg-icon icon-class="search"/>
      </span>
    </b-button>     
  </template>       
</b-table>

显然不起作用，在控制台中：

- [vue-router] missing param for named route "activityDetail": Expected "activityId" to be defined
- [vue-router] missing param for redirect route with path "/see-all-activities/:activityId": Expected "activityId" to be defined)

在getters文件中，我有：

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token
}
export default getters

所以在这里我需要一些类似的东西：

activityId: state => state.activity.activityId

它来自activity.js，它是：

import {
  getActivityId
} from '@/components/AllActivities'

const state = {
  activityId: getActivityId()
}

const mutations = {
  SET_ACTIVITY_ID: (state, activityId) => {
    state.activityId = activityId
  }
}

const actions = {
  setActivityId({
    commit
  }) {
    return new Promise(resolve => {
      commit('SET_ACTIVITY_ID', '')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

如果这是正确的，那么剩下的就是获取表行中包含的对象id的函数。 另外，如何在api调用（axios）中写入该活动id？ 现在我有：

export function getSingleActivity() {
  return request({
    url: 'http://localhost:8000/api/user_activity/:activityId',
    method: 'get'
  })
}

但我不确定这是否正确。 另外，如何访问其他属性（显示在detailActivity页面中）？ 这将由一些属性（可能是堆叠表组件）和贴图组件的列表组成，因此我需要访问这两个组件中的属性。 我希望我已经够清楚了，

---

谢谢。

值得一提的是，您正在使用vuex。如果我理解正确，您希望从vuex读取属性吗

要从vuex读取属性，您可以使用此。$store.getters.activity 或者使用mapGetter

阅读下一页

此外，在执行router.push时，还必须设置参数

router.push({ name: 'activity', params: { id: activityId } })

---

非常简单。我发布了如何解决这个问题，以防其他人也被困在这个问题上。 我在包含按钮的模板中添加了一个插槽作用域：

<template
        slot="actions"
        slot-scope="data"
      >

单击调用的函数变成：

goToDetailActivity(activity) {
      this.$router.push({
        name: 'DettaglioAttivita',
        params: { activityId: activity.id }
      })
    }

---

就是这样。

是的，我为vuex添加了标签，谢谢你指出它。我将尝试您的建议，谢谢。我刚刚注意到我编写的代码出现了以下错误：

uncaughttypeerror:（0，_AllActivities.getActivityId）不是函数

这是怎么回事？这确实是一个函数，我很困惑，我看到在状态下我只是保存activityId，但我需要保存整个activity对象，其中包含所有属性。。。

<template
        slot="actions"
        slot-scope="data"
      >

@click="goToDetailActivity(data.item)"

goToDetailActivity(activity) {
      this.$router.push({
        name: 'DettaglioAttivita',
        params: { activityId: activity.id }
      })
    }