Question

Vue 和简单商店

2018-08-10

60

vue.js

我创建了 Vue 应用程序，并且有一个简单的商店：

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

我收到错误：

Uncaught TypeError: Cannot read property 'data' of undefined

为什么我无法将 entitiesDisplayOptions 的值设置为 paginationStore.data.paginationLimits.top？我应该怎么做才能使其正常工作？

Answer 1

您可以将其存储在定义之外的变量中：

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

Answer 2

可能性很多。您要做的就是记住，在以对象文字的形式创建对象时，您不能引用其他对象属性。

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