CODEWITHSUNDEEP
javascriptarraysvue.jsvuex
vinc lre
vinc lre

Reputation: 15

VueJs access data in array

I find myself facing a problem. I need to retrieve a parameter in the url to display data dynamically but I can't find the solution.

what parameter must enter in state.event.aftermovies [] to have access to the id of my object.

If anyone has a solution, thanks

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

and I would like to access the id of my object

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

what is the right way ??

Upvotes: 0

Views: 82

Answers (1)

YJay
YJay

Reputation: 91

Assuming aftermovies is an array containing objects like:

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

you could do something like aftermovies[0].id

Here is a jsfiddle example

Upvotes: 1

Related Questions