Vue and simple store

Question

I created Vue application and I have simple store:

const paginationStore = {
  data: {
    entitiesDisplayOptions: [
      { value: '1', text: '1' },
      { value: '2', text: '2' },
      { value: '4', text: '4' },
      { value: '999999', text: 'All' },
    ],
    paginationLimits: {
      bottom: 0,
      top: paginationStore.data.entitiesDisplayOptions[0].value
    }
  }
}

I'm getting error:

Uncaught TypeError: Cannot read property 'data' of undefined

Why I can't set value from entitiesDisplayOptions to paginationStore.data.paginationLimits.top? What should I do to make it works?

Possible duplicate of [Access object properties within object](https://stackoverflow.com/questions/12789141/access-object-properties-within-object) — JJJ, Aug 10 '18 at 12:39
You can't do that. I mean during the initialization, so creation the object as object literal. You have to use another technique — Vladislav Ladicky, Aug 11 '18 at 13:43

score 0 · Accepted Answer · answered Aug 10 '18 at 12:38

You could store it in a variable outside the definition:

const newEntitiesDisplayOptions = [
      { value: '1', text: '1' },
      { value: '2', text: '2' },
      { value: '4', text: '4' },
      { value: '999999', text: 'All' },
];

const paginationStore = {
  data: {
    entitiesDisplayOptions: newEntitiesDisplayOptions ,
    paginationLimits: {
      bottom: 0,
      top: newEntitiesDisplayOptions[0].value
    }
  }
}

score 0 · Answer 2 · answered Aug 11 '18 at 13:49

There is lot of possibilities. Everything you have to do is to remember you can't reference the other object properties at the moment of creation of object in the form of object literal.

const entitiesDisplayOptions = [
  { value: '1', text: '1' },
  { value: '2', text: '2' },
  { value: '4', text: '4' },
  { value: '999999', text: 'All' },
]

const paginationLimits = {
  bottom: 0,
  top: paginationStore.data.entitiesDisplayOptions[0].value
}

const paginationStore = {
  data: {
    entitiesDisplayOptions,
    paginationLimits
  }
}

Vue and simple store

2 Answers2