vue循环中处理数据?

Question

想在循环的时候计算这个距离，但是return出来的是个promise对象，请问该如何处理

Answer 1

获取到数据后,在js里调用julical,然后等promise.all之后,再赋值数据到页面里

Answer 2

@643104191 说到了点子上，只是没具体说明。

看意思，你的数据是从 datalist 里去取的，但实际上 datalist 中的数据不全，还差异步获取的 julical 数据。因为是异步获取，所以并不知道什么时候能拿到，只能说拿到了再用来渲染。要触发渲染，需要数据有所变化。可以设置另一个数据叫 viewList，初始化为 []，然后 watch datalist 的变化，并在其中进行处理。而模板的循环那里，使用新的 viewList 代替 datalist。

// 代码示意
watch: {
    async datalist(value) {
        // 拿到数据之后，虽然不完整，但是最好把能显示的先显示出来，所以立即赋值
        this.viewList = value;
        // 然后去异步获取 julical 数据，获取到后给原对象添加属性
        const ps = value.map(async it => it.julicalData = await julical(it.shoplat, it.shoplng));
        // 等所有异步操作完成
        await Promise.all(ps);
        // 刷新 viewList 触发渲染
        this.viewList = [...value];
    }
}

这里有一个示例，用的 mounted，但道理是一样的（模拟了 1 秒的异步操作）

https://codepen.io/jamesfancy...

Answer 3

那就取

const value = await res.route.paths[0].distance
return value;