我如何 select 基于键值的对象 - VueJS

Question

我在 Vuejs 中有一个对象（见下文）。我想要 select 电子邮件值，即："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>

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

我试过这样做但没有成功：

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

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

Answer 2

您也可以检查正在呈现的当前键是否具有与相应键与 'email' 标签自己的索引相匹配的索引。

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

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

我如何 select 基于键值的对象 - VueJS

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

javascript

select

vue.js

v-for