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>

Answer 2

在这种情况下，建议使用computed属性，并通过v-for遍历该属性，我提供了一个模拟您的情况的示例：

new Vue({
  el: '#app',
  data: {
    a: ["aaa", "bbb", "ccc", "ddd", "eee", "fff"],
    b: ["bbb", "sss", "ccc", "eee"]
  },
  computed: {
    isInA() {
      return this.b.filter((item) => {
        return this.a.includes(item)
      })
    }
  }

})

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="item in isInA">
      {{item}}
    </div>
  </div>

如果您的数组包含类似您的情况的对象，则需要类似以下内容：

computed:
 cpt_clients(){
return this.clientList.filter((cl)=>{
                          return this.otherList.findIndex(item=>{return item.id==cl.id;})!==-1;
                        });
         }
       }

并在您的模板中执行：

  <v-card-text v-for="cl in cpt_clients" >
       {{cl.name}}
        {{cl.id}}
   </v-card-text>

Answer 3

我认为计算比方法更好，因为它取决于您的localId

computed: {
   getClientsById (clientId) {
     return this.currentClientList.filter((ccl) => { return this.currentClientList.id === localId });
   }
} 


<v-card-text v-for="item in getClientById">
    {{ item.name }}
</v-card-text>


// Second way without methods and computed

<v-card-text v-for="item in currentClientList" v-if=item.id === localId>
    {{ item.name }}
</v-card-text>

Answer 4

这是我发现的最佳解决方法，因为它缺少局部变量，即通过将值包装为单元素数组，因为VUE原生支持数组迭代：

<template v-for="local_variable in [object.longComputationValueProducer().evenMoreCPUWork()]">
    <!-- body guaranteed to be executed exactly 1-->
    <div>{{ local_variable.read }}</div>
    <div>{{ local_variable.read_without_recompute }}</div>
    <div>{{ local_variable.read_again_without_recompute }}</div>
</template>

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

4 个答案: