获取点击项目的 ID 并将其用于在 vuejs 中创建动态 url

Question

我有一个 vue bootstrap table 在每一行中显示数组对象的几个属性（通过 api 调用 axios）。

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

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

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

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

我很困惑。

这里是代码：

Table 所有活动：

<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>

在脚本中：

export default {
name: 'AllActivities',
data() {
  return {
    fields: [
      { key: 'activity.activityName', label: 'Activity', _showDetails: true},
      { key: 'related_activity', label: 'Related activity', _showDetails: true},
      { key: 'start', label: 'Start', _showDetails: true },
      { key: 'end', label: 'End', _showDetails: true },
      { key: 'travel_mode', label: 'Travel mode', _showDetails: true },
      { key: 'actions', label: '' }
    ],
    activity: [],
    methods: {
      getIdActivity(){
       **?? how to get it ??**
      },
      goToActivityDetail() {
        this.$router.push({
          name: 'activityDetail'
        })
      }
    }

goToActivityDetail()

显然不行，在控制台：

- [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
}

如果这是对的，剩下的就是获取table行中所点击对象的id的函数。另外，如何在 api 调用（axios）中写入 activity id？现在我有：

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

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

Answer 1

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

要从 vuex 读取属性你可以使用这个。$store.getters.activity 或者使用 mapGetter.

阅读下一页https://vuex.vuejs.org/guide/getters.html

此外，您还必须在执行 router.push

时设置参数

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

Answer 2

非常简单。我 post 如何解决它以防其他人也被困在这个问题上。我在包含按钮的模板中添加了一个插槽范围：

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

然后我将单个 activity（在 vue bootstrap 标记 data.item 之后）作为参数添加到按钮点击

@click="goToDetailActivity(data.item)"

而点击调用的函数变为：

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

就是这样。

获取点击项目的 ID 并将其用于在 vuejs 中创建动态 url

Get id of item clicked and use it for creating dynamic url in vuejs

vue-router

vuex

vuejs2

dynamic-routing