我如何根据键值 select 和 Object - VueJS

Question

我在 Vuejs 中有一个 object（见下文）。 我想 select email 值，即：“foo@bar.com”。

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

我可以做一个

v-for(field in fields)

然后添加一个 if 语句以仅显示 email

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

但我想知道是否有更好的方法来基于键值的字段 select 而无需遍历整个数据 object。

我尝试不成功地做这样的事情：

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

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

请注意，这仅在这种情况下有效，因为我们已经知道 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>