Блог

Я пытаюсь отобразить содержимое на основе идентификатора, я пытаюсь переключить идентификатор из своего меню. У меня возникли проблемы с настройкой идентификатора. ChannelName содержит все каналы с разными идентификаторами. Когда я нажимаю на элемент, я хочу, чтобы отображался определенный контент для идентификатора.

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

Идентификатор доступен в объекте, который вы повторяете.

 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 так. Я не могу судить по вашему примеру.

Если вам нужен идентификатор из имени, вы бы использовали метод, а не вычисляемый.

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