根据特定值从数组中选择项目
Posted
技术标签:
【中文标题】根据特定值从数组中选择项目【英文标题】：Select items from an array based on specific values 【发布时间】：2021-08-03 21:44:57 【问题描述】：我目前得到一个体育赛事列表并将它们存储为 Vue 数据对象。数组中的每个项目都有 Home Win、Away Win、Draw 的键值对。使用v-for，我想列出所有类型为“home”和类型“away”的团队名称，但这些项目的顺序没有按顺序返回。
所以使用v-for 我试图了解如何渲染：
<div>home 类型的teamname 值 vs away 类型的teamname 值</div>
"data": [
"options": [
"type": "home",
"teamname": "xxx"
,
"type": "away",
"teamname": "yyy"
,
"type": "draw",
"teamname": "no winner"
]
,
"options": [
"type": "away",
"teamname": "yyy"
,
"type": "draw",
"teamname": "no winner"
,
"type": "home",
"teamname": "xxx"
]
,
"options": [
"type": "draw",
"teamname": "no winner"
,
"type": "home",
"teamname": "xxx"
,
"type": "away",
"teamname": "yyy"
]
]
【问题讨论】：
为了清楚起见，您希望在传入数据中为每个option 对象显示一个 <div> teamname value of type home vs teamname value of type away </div>？
完全正确。对于数组中的每一项
【参考方案1】：
我想这就是你要找的东西：
...
<div v-for="(item, index) in data" key="index">
item.options.find(op => op.type === "home").teamname vs item.options.find(op => op.type === "away").teamname
</div>
...
您将遍历传入的data 对象中的每个项目，并为每个项目使用Array.prototype.find() 来检索所需的团队。
可运行示例如下：
new Vue(
el: '#app',
data()
return
data: [
"options": [
"type": "home",
"teamname": "xxx"
,
"type": "away",
"teamname": "yyy"
,
"type": "draw",
"teamname": "no winner"
]
,
"options": [
"type": "away",
"teamname": "yyy"
,
"type": "draw",
"teamname": "no winner"
,
"type": "home",
"teamname": "xxx"
]
,
"options": [
"type": "draw",
"teamname": "no winner"
,
"type": "home",
"teamname": "xxx"
,
"type": "away",
"teamname": "yyy"
]
],
,
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h3>Home vs. Away</h3>
<div v-for="(item, index) in data" key="index">
item.options.find(op => op.type === "home").teamname vs item.options.find(op => op.type === "away").teamname
</div>
</div>最后一点；
如果您可以控制输入，并且您知道结构将是一致的，那么将 options 数组作为单个对象发送可能是有意义的。不要让 3 个对象每个都带有 type 和 teamname 键，而是使用一个带有 home/away/draw 的对象作为单独的键，如下所示：
options:
home: 'home-team-name',
away: 'away-team-name',
draw: 'no winner',
这样，您可以直接访问该字段，而不是使用item.options.find(op => op.type === "home").teamname：
item.options.home vs item.options.away
new Vue(
el: '#app',
data()
return
data: [
"options":
"home": "xxx",
"away": "yyy",
"draw": "no winner",
,
"options":
"away": "yyy",
"draw": "no winner",
"home": "xxx",
,
"options":
"draw": "no winner",
"home": "xxx",
"away": "yyy",
],
,
);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h3>Home vs. Away</h3>
<div v-for="(item, index) in data" key="index">
item.options.home vs item.options.away
</div>
</div>【讨论】：
【参考方案2】：一个解决方案的小sn-p：
const results =
"data": [
"options": [
"type": "home",
"teamname": "xxx"
,
"type": "away",
"teamname": "yyy"
,
"type": "draw",
"teamname": "no winner"
]
,
"options": [
"type": "away",
"teamname": "yyy"
,
"type": "draw",
"teamname": "no winner"
,
"type": "home",
"teamname": "xxx"
]
,
"options": [
"type": "draw",
"teamname": "no winner"
,
"type": "home",
"teamname": "xxx"
,
"type": "away",
"teamname": "yyy"
]
]
Vue.component("DisplayResult",
props: ['result'],
computed:
home()
return this.result.find((
type
) => type === "home")["teamname"]
,
away()
return this.result.find((
type
) => type === "away")["teamname"]
,
,
template: `
<div> home vs. away </div>
`
)
new Vue(
el: "#app",
data()
return
results: [],
,
mounted()
this.results = results.data
,
template: `
<div>
<display-result
v-for="( options , i) in results"
:key="i"
:result="options"
/>
</div>
`
)<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>使用此解决方案，您可以对结果的显示进行精细控制：样式、内容等在一个组件中，而数据源在父组件中。模板“清晰”，没有任何代码，因此维护和更新更容易。
【讨论】：
以上是关于根据特定值从数组中选择项目的主要内容，如果未能解决你的问题，请参考以下文章