使用数组值作为另一个键中的键

Question

我无法从数组中读取。有源数组：

tnails: [
    {
      mil: '/static/mini/t-icon-mil.png',
      mar: '/static/mini/t-icon-mar.png',
      brd: '/static/mini/t-icon-brd.png',
      prs: '/static/mini/t-icon-prs.png',
      pol: '/static/mini/t-icon-pol.png',
      fbr: '/static/mini/t-icon-fbr.png'
    }
  ],

还有一个：

this.headers = [
        {
          mil: 'Entry No. 1',
          mar: 'Entry No. 2',
          brd: 'Entry No. 3',
          prs: 'Entry No. 4',
          pol: 'Entry No. 5',
          fbr: 'Entry No. 6'
        }
      ]

我正在尝试使用 tnails 数组条目的一部分作为键来显示 headers 数组中的值：

tn.substring(20, 23)

它给出了我打算使用的 mil、mar 等值。

现在格式是这样的：

      <v-layout v-for="t in tnails" :key="t.id">
        <v-flex v-for="tn in t" :key="tn.id">
          <v-tooltip>
            <img :src="tn" slot="activator">
            <span>{{ headers (???) tn.substring(20, 23) }}</span>
          </v-tooltip>
        </v-flex>
      </v-layout>

我应该如何组合这两个数组中的数据来显示 headers 中的条目？

Answer 1

您可以使用括号表示法来引用属性 of headers 对象，使用解析后的字符串作为键

headers[index][tn.substring(20, 23)]

使用数组值作为另一个键中的键

Using Array Value as a Key in Another One

javascript

vue.js

vuejs2

vuetify.js