在 Vue JS 中的 v-for 循环期间分配局部变量

Question

我正在努力想出一个解决方案来解决这个看似基本的问题。

我有一个使用 v-for 循环创建一些内容的模板，在该内容中我需要运行一个函数来检查 contentID 是否与单独列表中的 ID 匹配。如果匹配，我需要获取该数据并将其显示在我的循环中。目前获取该数据的唯一方法是运行多次检查的函数，即

methods: {
findClientName (clientId) {
  for (let name of this.clientList) {
    if (name.id == clientId) {
      return {
        name
      }
    }
  }
}

<v-card-text>
    {{ findClientName(item.client_id).name.f_name }}
    {{ findClientName(item.client_id).name.l_name }}
</v-card-text>

这似乎是一种非常无效的方法，因为我需要在我想要的数据的每个部分上调用该方法，有没有办法将其分配给模板内的局部变量，例如..

{ clientData = findClientName(item.client_id) }
{{ clientData.f_name }}
{{ clientData.l_name }}

我错过了什么或没有想到什么？

Answer 1

如果您需要的数据在另一个列表中，您将必须进行某种查找。是否可以预先规范化客户端列表并在模板循环中使用它？大致如下：

data () {
  return {
    mapped: [],
    clientList: [...]
  }
},
mounted () {
  this.mapped = this.clientList.map(({ id, f_name, l_name }) => {
    return { [id]: { f_name, l_name } }
  })
}

那么你的模板将是：

<template>
 ...
    <v-card-text v-if="mapped.hasOwnProperty(item.client_id)">
      {{ mapped[item.client_id].f_name }}
      {{ mapped[item.client_id].l_name }}
    </v-card-text>
 ...
</template>