0

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

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

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

商店的结构使我有一个用于用户的模块和另一个用于这些对象（活动）的模块。在这些模块中，我处理状态、动作和突变。一个单独的文件处理 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>

在脚本中：

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)

在吸气剂文件中，我有：

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 页面中）？这将由一些属性的列表（可能是堆叠表组件）和地图组件组成，因此我需要访问这两个组件中的属性。我希望我已经足够清楚了，谢谢。

4

2 回答 2

1

这很简单。我发布了如何解决它，以防其他人也陷入困境。我在包含按钮的模板中添加了一个插槽范围：

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

然后我将单个活动（在 vue 引导标记 data.item 之后）作为参数添加到按钮单击

@click="goToDetailActivity(data.item)"

而点击调用的函数变成了：

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

而已。

于 2019-08-29T13:03:57.640 回答
0

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

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

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

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

router.push({ name: 'activity', params: { id: activityId } })
于 2019-08-29T09:18:48.207 回答