How do I select an Object based on the key value - VueJS

Question

I have an object in Vuejs (see below). I want to select the email value ie: "[email protected]".

{
      "fields": [
        {
          "label": "email",
          "value": "[email protected]", 
        },
        {
          "label": "firstName",
          "value": "Foo", 
        },
        {
          "label": "lastName",
          "value": "Bar", 
        },
      ]
     }

I can do a

v-for(field in fields)

Then add an if statement to show only the email

<div v-if="field.label == 'email'">{{field.value}}</div>

But I was wondering if there was a better way to select the field based on a key's value without having to loop through the entire data object.

I tried unsuccessfully doing things like this:

fields(label, 'email')
// and
v-if fields.label == 'email'

Phil · Accepted Answer · 2020-06-09 02:09:02Z

1

One solution would be to create a computed map of field label to value

computed: {
  fieldMap () {
    return Object.fromEntries(this.fields.map(({ label, value }) => [ label, value ]))
  }
}

Then you can use

<div>{{ fieldMap.email }}</div>

If you're only wanting to work with this specific field, you can create a computed property to make access easier

computed: {
  emailField () {
    let field = this.fields.find(({ label }) => label === 'email')
    return field ? field.value : ''
  }
}

and then you can just use

<div>{{ emailField }}</div>

edited Jun 9, 2020 at 2:09

answered Jun 9, 2020 at 2:00

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeCabin Over a year ago

Sweet, looks good to me, works a charm. Thanks for the quick reply @Phil

Lachlan · Accepted Answer · 2020-06-09 02:01:45Z

0

You could alternatively check if the current key being rendered has an index that matches the respective key with the 'email' label's own index.

Note that this will only work in this instance as we already know the exact values of the object.

<div v-for="(field, index) in fields" :key="index">
  <div v-if="index === 0">
    {{ field.value }}
  </div>
  <div v-else>
    Not email: {{ field.value }}
  </div>
</div>

answered Jun 9, 2020 at 2:01

Lachlan

1,2926 gold badges18 silver badges35 bronze badges

1 Comment

CodeCabin Over a year ago

Would work but I don't always know the index of email.

Collectives™ on Stack Overflow

How do I select an Object based on the key value - VueJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related