小编aid*_*rne的帖子

我正在使用 v-for 循环访问一个对象，我需要访问键、值和索引。我见过很多方法来访问其中两个，这很简单，但找不到如何访问所有三个。

我找到了一个解决方法，但它非常混乱且难以阅读。

<div v-for="idx in Object.keys(PointsAvailable[0]).length" :key="idx">
  <PointSquare
    :Value="Object.keys(PointsAvailable[0])[idx-1]"
    :Availability="PointsAvailable[0][Object.keys(PointsAvailable[0])[idx-1]]"
    :reference="idx-1">
  </PointSquare>
</div>

有更好的方法吗？

但是，我想从 vue 单文件组件的模板访问我的环境变量，请执行以下操作：

<img :src="`${process.env.VUE_APP_API_BASE_URL}/image/${image.filename}`" alt="" />

给我错误：

 Property or method "process" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

我知道我的环境变量设置正确，因为我可以在其他地方使用它们，并且我可以使用解决方法在组件上创建一个新变量并引用：

data() {
  return {
    BaseUrl: process.env.VUE_APP_API_BASE_URL,
  };
},

<img :src="`${BaseUrl}/image/${image.filename}`" alt="" />

这能够正确加载图像，但是如何直接在模板中访问环境变量，而不需要为每个组件初始化新变量？