如何根据键值选择对象 - VueJS答案

【问题标题】：How do I select an Object based on the key value - VueJS如何根据键值选择对象 - VueJS
【发布时间】：2020-09-28 02:39:22
【问题描述】：

我在 Vuejs 中有一个对象（见下文）。我想选择电子邮件值，即：“foo@bar.com”。

{
      "fields": [
        {
          "label": "email",
          "value": "foo@bar.com", 
        },
        {
          "label": "firstName",
          "value": "Foo", 
        },
        {
          "label": "lastName",
          "value": "Bar", 
        },
      ]
     }

我可以做一个

v-for(field in fields)

然后添加 if 语句以仅显示电子邮件

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

但我想知道是否有更好的方法来根据键的值选择字段，而不必遍历整个数据对象。

我尝试做这样的事情没有成功：

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

【问题讨论】：

标签： javascript vue.js select v-for

【解决方案1】：

一种解决方案是创建字段label 到value 的计算图

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

然后就可以使用了

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

如果您只想使用此特定字段，则可以创建一个计算属性以使访问更容易

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

然后你就可以使用

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

【讨论】：

甜美，我觉得不错，很有魅力。感谢@Phil 的快速回复

【解决方案2】：

您也可以检查当前正在呈现的键是否具有与相应键与“电子邮件”标签自己的索引相匹配的索引。

请注意，这仅适用于这种情况，因为我们已经知道对象的确切值。

<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>

【讨论】：

可以，但我并不总是知道电子邮件的索引。