[Vuejs]-Syntax for data binding with Index

by

2👍

✅

<tr v-for="index in 5">
  <td>{{player1.round1['play'+index]}}</td>
  <td>{{player2.round1['play'+index]}}</td>
</tr>

within the double-curlies of the vue template, the content is handled as javascript.

when looking up an object in javascript you can either pass the key using the dot notation or the bracket syntax.

For example, if you have an object such as this:

const objectA = {
  objectB: {
    objectC: {
    }
  }
};

you can look up objectC either using dot notation:
objectA.objectB.objectC

or using brackets:
objectA['objectB']['objectC']

note that when you are using brackets, that you have to use a simple type, a number or a string (technically symbols are also accepted, but let’s not worry about that right now). The bracket syntax does however allow you to use a variable in order to access an object, like so:

let b='objectB';
let c='C';
objectA[b]['object' + c];
objectA[b][`object${c}`];

knowing this, you can then use that to access the right object inside your vue template like this:

<td>{{player1.round1['play'+index]}}</td>

or, using template literals:

<td>{{player2.round1[`play${index}`]}}</td>
👤Daniel

Leave a comment