Vue中如何用已声明的elements对象初始化selectedElement变量？

你这段代码无法运行的原因是：在return的对象内部，elements还未完成定义，直接引用elements[0]会导致变量未找到的错误。以下是几种正确的实现方式：

方法一：提前定义elements变量 #

在return外部先声明elements数组，这样就能在返回对象里直接引用它来初始化selectedElement：

data() {
  const elements = [
    { id: 0, name: 'Simple elements' },
    { id: 1, name: 'Call to action' },
  ];
  return {
    elements,
    selectedElement: elements[0]
  };
},

方法二：利用created钩子初始化 #

先把selectedElement设为null，在组件创建完成的created钩子中，再通过this.elements获取数组元素赋值：

data() {
  return {
    elements: [
      { id: 0, name: 'Simple elements' },
      { id: 1, name: 'Call to action' },
    ],
    selectedElement: null
  };
},
created() {
  this.selectedElement = this.elements[0];
}

方法三：按id精准查找（更灵活） #

如果需要根据指定id来匹配元素，用数组的find方法可以更精准地定位，哪怕数组顺序变化也不影响：

data() {
  const elements = [
    { id: 0, name: 'Simple elements' },
    { id: 1, name: 'Call to action' },
  ];
  return {
    elements,
    selectedElement: elements.find(item => item.id === 0)
  };
},

内容的提问来源于stack exchange，提问作者lopezi