数组键作为文件名

Question

在数组中，存在像这些对的键值：

ranks: [
    {
      r_mil_pvt_e2: 'Private E-2',
      r_mar_seaman_rcr: 'Seaman Recruit',
      [...]
    }

密钥基本上是存储在./static/img/目录中的文件的名称，在这种情况下它只会丢失扩展名* .png。所以，有r_mil_pvt_e2.png这样的文件。

使用 v-for 作为下面<img>标记中的图片来源，是否可以动态使用密钥并对其进行处理？

<v-layout row v-for="r in ranks" :key="r.id">
  <v-flex xs2 v-for="n in r" :key="n.id">
    <img :src="/static/img/[[[ key ]]].png" />
[...]

Answer 1

根据Vue.JS' documentation von v-for：

  

您还可以使用v-for迭代对象的属性

和

  

您还可以为键

提供第二个参数

他们提供的例子如下：

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

要在value中使用key或v-bind这样的变量（或使用简写语法:），请将其定义为返回最终字符串的函数

因此，对于您的示例，它应该像这样工作：

<v-layout row v-for="r in ranks" :key="r.id">
  <v-flex xs2 v-for="(n, nKey) in r" :key="n">
    <img :src="'/static/img/' + nKey + '.png'" />
[...]