[Vuejs]-How to v-for loop data, but display it according to input of model

by

0👍

Put FirstName and LastName in variables:

data: { attr1: 'FirstName', attr2: 'LastName', labels: [
  {
    FirstName: 'Michael',
    LastName: 'Scott'
  },
  {
    FirstName: 'Pam',
    LastName: 'Beesly'
  }]
}

Then use the new variables for “variable” output in the HTML:

<li v-for="label in labels">
  {{ label[attr1] }} {{ label[attr2] }}
</li>

Then create a way to let the user define attr1 and attr2, for example using

<select v-model="attr1"><option v-for="prop in Object.keys(labels[0])">{{ prop }}</option></select>

element offering the available properties.

I think this should get you started.

Leave a comment