同一个dom如何同时使用两个数组的数据

原本的代码只需要循环一个数组即可：

<div v-for="(item,index) in List" :key="index" :style="{'left':item.left+'px','top':item.top+'px'}" >
    <div>{{item.name}}</div>
</div>

但是由于需求变更需要拆成两个数组，于是尝试：

<div v-for="(item,index) in List" :key="index" :style="{'left':arr(element=>element.index==index)[0].left+'px','top':arr(element=>element.index==index)[0].top+'px'}" >
    <div>{{item.name}}</div>
</div>

报错，于是封装到methods中：

<div v-for="(item,index) in List" :key="index" :style="{'left':getLeft(index)+'px','top':getTop(index)+'px'}" >
    <div>{{item.name}}</div>
</div>

methods:{
    getLeft(index){
        return arr.filter(item=>item.index==index)[0].left
    },
    getTop(index){
        return arr.filter(item=>item.index==index)[0].top
    },
}

依然报错，于是想到直接使用数组的index属性：

<div v-for="(item,index) in List" :key="index" :style="{'left':arr[index].left+'px','top':arr[index].top+'px'}" >
    <div>{{item.name}}</div>
</div>

还是报错，于是想到可能是需要转一下：

<div v-for="(item,index) in List" :key="index" :style="{'left':arr[`${index}`].left+'px','top':arr[`${index}`].top+'px'}" >
    <div>{{item.name}}</div>
</div>

结果html显示出来是：

{ "index": 1, "top": 328, "left": 32 }

然后使用json转化：

<div>JSON.parse(arr[`${index}`])</div>
<div>JSON.parse("'"+arr[`${index}`]+"'")</div>

不行，打印成[object][object]，无奈使用css：

.item {
    &:nth-of-type(2){
        left:3px;
        top:417px;
    }
}