在vue中,一个数组A包含多个missionname,一个数组B储存了A数组中多个missionname的多个内容,如何实现对应missionname下通过对el-timeline显示对应数组A中missionname的数字B中的内容
时间: 2024-09-21 13:04:06 浏览: 21
在 Vue 中,你可以使用 `v-for` 来遍历数组 A 和 B,同时结合模板绑定和条件渲染来实现这个功能。假设我们有一个数据结构类似这样的:
```javascript
data() {
return {
arrayA: [
{ missionName: 'Mission 1', content: [] },
{ missionName: 'Mission 2', content: [] },
{ missionName: 'Mission 3', content: [] }
],
arrayB: [
{ missionName: 'Mission 1', value: 'Content 1' },
{ missionName: 'Mission 2', value: 'Content 2' },
{ missionName: 'Mission 3', value: 'Content 3' }
]
}
}
```
然后在模板(比如用 Vue 的 `<template>`)里,你可以这样做:
```html
<template>
<el-timeline :data="timelineData">
<el-timeline-item v-for="(mission, index) in arrayA" :key="index">
<template #title>{{ mission.missionName }}</template>
<template #content>
<div v-if="arrayB.find(item => item.missionName === mission.missionName)">
{{ item.value }}
</div>
</template>
</el-timeline-item>
</el-timeline>
</template>
<script>
// ...
export default {
computed: {
timelineData() {
return this.arrayA.map((mission, index) => ({
// 假设 el-timeline 需要的时间线数据结构是这样
time: new Date(), // 或者你需要的其他时间戳
info: {
title: mission.missionName,
content: this.arrayB.find(item => item.missionName === mission.missionName)?.value || '',
}
}));
}
}
};
</script>
```
在这个例子中,`v-for` 循环遍历 `arrayA`,并查找对应的 `arrayB` 元素来显示内容。如果找到了匹配的元素,就会显示它的 `value` 属性。