gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:08:35 24 4
gpt4 key购买 nike

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

我有一个模板,它使用 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 }}

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

最佳答案

建议使用 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>

关于javascript - 在 Vue JS 中的 v-for 循环期间分配局部变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53714999/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com