VueJs 访问数组中的数据答案

【问题标题】：VueJs access data in arrayVueJs 访问数组中的数据
【发布时间】：2021-01-16 08:47:54
【问题描述】：

我发现自己面临一个问题。我需要在url中检索一个参数来动态显示数据，但是我找不到解决方案。

必须在 state.event.aftermovies [] 中输入什么参数才能访问我的对象的 id。

如果有人有解决办法，谢谢

<template>
  <div>
    <div class="container text-center">
      <div>
        <h1>{{ aftermovie.id }}</h1>
        <h1>{{ aftermovie.name }}</h1>
        <h1>{{ aftermovie.slug }}</h1>
        <h1>{{ aftermovie.video }}</h1>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  async fetch({ store, error, params }) {
    try {
      await store.dispatch('fetchEvent', params.id)
    } catch (e) {
      error({
        statusCode: 503,
        message: 'Unable to fetch event #' + params.id,
      })
    }
  },

  //Here is my problem
  computed: mapState({
    aftermovie: (state) => state.event.aftermovies[??????????????????]
  }),
  head() {
    return {
      title: this.aftermovie.name
    }
  }
}
</script>

我想访问我的对象的 id

event:Object
address:"Belgium"
aftermovies:Array[1]
0:Object
event_id:1
festival_id:""
id:4
name:"reverze 2020"
slug:"reverze-2020"

什么是正确的方法？？

【问题讨论】：

标签： javascript arrays vue.js vuex

【解决方案1】：

假设aftermovies 是一个包含如下对象的数组：

aftermovies: [{
  event_id:1,
  festival_id:"",
  id:4,
  name:"reverze 2020",
  slug:"reverze-2020"
}]

你可以做类似aftermovies[0].id

这是jsfiddle example

【讨论】：