[Vuejs]-Array key as a part of a file name

2👍

According to Vue.JS’ documentation von v-for:

you can also use v-for to iterate through the properties of an object

and:

You can also provide a second argument for the key

The example they provide is as follows:

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

To use such a variable like value or key in v-bind (or using the short-hand syntax :), define it like a function returning the final string.

So, for your example, it should work like this:

<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'" />
[...]
👤cello

Leave a comment