how to assign a dynamic parameter in an array in the computed method and mapState

Question

hello here is my computed method :

computed:
    mapState({
    aftermovie: (state) => state.festival.aftermovies[id]
  }),
    id: {
      set() { return this.$route.params.id}
    },

if i put state.festival.aftermovies [0] it works but if i try to get id in url, id is undefined, can you help me please

this should work `state.festival.aftermovies[this.$route.params.id]` — Syed, Oct 30 '20 at 04:59

Psidom · Answer 1 · 2020-10-30T06:24:21.020

0

I think the issue is you can't access this or other computed property in mapState, try the following:

computed: {
  ...mapState({
    aftermovies: (state) => state.festival.aftermovies
  }),
  id() {
    return this.$route.params.id
  },
  aftermovie() {
    return this.aftermovies[this.id]
  }
}

edited Oct 30 '20 at 06:24

answered Oct 30 '20 at 04:57

Psidom

209,562
33
339
356

nope it does not work, it returns me the answer: Cannot read property 'id' of undefined – vinc lre Oct 30 '20 at 05:42

score 0 · Accepted Answer · answered Oct 30 '20 at 07:17

thank you very much yes indeed we can not access this in mapState here is the functional solution:

data() {
    return {
    // -1 because the aftermovie index is 1 and the index in the array starts at 0
      id: this.$route.params.id - 1
    }
  },
  computed:
    mapState({
      aftermovies: (state) => state.festival.aftermovies
    }),

and finally to access the data

<template>
  <div>
    <div class="container text-center">
      <div>
        {{ aftermovies[this.id].id }}
        {{ aftermovies[this.id].name }}
        {{ aftermovies[this.id].video }}
      </div>
    </div>
  </div>
</template>

how to assign a dynamic parameter in an array in the computed method and mapState

2 Answers2