时间戳

首页 > 解决方案 > id动态路由

vue.js - id动态路由

问题描述

我正在尝试根据 ID 显示内容，我正在尝试从我的菜单中切换 id。我在设置 ID 时遇到问题。channelName 包含具有不同 ID 的所有频道。当我单击一个项目时，我希望显示 ID 的特定内容。

    router-link(:to="{name: 'ChannelPaths', params: {id: findId }}" v-for="channel in channelName" :key="channel.id" tag="p")


  {
    path: "channels/:id/messages",
    name: "ChannelPaths",
    component: Content,
    props: true
  }

 ...mapState({
      channelName: (state) => state.channels.fetchChannels,
    }),
    findId() {
      return this.channelName.find(ch => ch.channel_id)
    }

API 示例

 {
        "message_id": "844646e9-648d-4a06-aa1a-f747133601f9",
        "description": null,
        "timestamp": null,
        "email": null,
        "channel_id": "d17b7638-d758-4c91-b852-fa1f939e3671",
        "channel_name": "Test"
    },

 fetchChannelMessages({commit,}, id) {
        axios.get(`http://localhost:5000/channels/${id}/messages`)
        .then((res) => {
            commit(SET_CHANNEL_MSG, res.data);
        }).catch(e => console.log(e))
    },

.content__msg-list--message.d-flex(v-for="msg in messageList", :key="msg.id")
      .d-flex.align-items-center.content__msg-left
        b-avatar.mr-3(variant="secondary")
        p.mb-0 {{ msg.description }}
        span#time.mb-0 {{ msg.timestamp }}

标签： vue.jsvuejs2

解决方案

id 在您正在迭代的对象中可用。

router-link(:to="{name: 'ChannelPaths', params: {id: channel.channel_id }}" v-for="channel in channelName" :key="channel.channel_id" tag="p")

也许是channel.id和不是channel.channel_id。我不能从你的例子中看出。

如果您需要名称中的 id，您将使用方法，而不是计算。

findId(channelName) {
      return this.channelName.find(ch => ch.channel_name === channelName).channel_id
    }

推荐阅读