Javascript Vue.js模板循环-异步axios调用

我正在一个数组上循环并呈现一个HTML模板，这非常有效。对于其中一列，我需要使用axios执行额外的AJAX调用，以便每行获取数据

但是在AJAX调用完成后，我无法更新模板。。我尝试将循环变量作为引用传入，并尝试从axios返回承诺

我想我理解异步调用应该如何工作的基本前提，只是找不到在Vue模板/组件中设置异步调用的正确方法

例如：

{{vention.name}
{{getcampscont（场馆）}{{venture.camps_count}}

导出默认值{
...
方法：{
...
异步getCampsCount（场馆）{
控制台日志（场地）；
让我们来计算一下；
地点.营地计数='…'；
让这个场地=场地；
返回axios.get(
路线（'api3.场馆课程'，{场馆：场馆id}），
{
参数：{
类型：“Hol”，
现行:1,，
},
}
)
。然后（响应=>{
log（response.data.meta.total）；
camps_count=response.data.meta.total；
此_vention.camps_count=response.data.meta.total；
返回营地人数；
})
.catch（错误=>{
营地数量=‘不适用’；
该营地数量='n/a'；
返回营地人数；
})
.然后（（）=>{
//总是跑
返回营地人数；
});
},
}
}

在循环中使用引用并通过索引访问它

this.$refs.target[theIndex].innerText='The Value'

您还可以创建一个数据成员，绑定到该成员，并在异步处理程序中进行更新

<div>{{results[venue.id]}}</div>

---

您不应该像这样直接在模板中调用数据获取操作（或任何改变组件状态以触发重新渲染器的操作）。只需在模板外部调用

getcampscont

，比如在

创建的

钩子内或其他适当的地方。不应该每次重新呈现DOM时都提取。这既昂贵又不必要。相反，用异步数据一次性填充整个

场馆结果。不要对遇到的每一行都发出一个请求，而是尝试将所有行绑定到一个请求中。最好在服务器端获取
camps\u计数
，并将其与
venue\u结果一起返回
，这样它就是循环中
venue
的一个属性
<script>
    export default {
        ...
        methods: {
            ...
            async getCampsCount(venue) {
                console.log(venue);

                let camps_count = '...';
                venue.camps_count = '...';

                let this_venue = venue;

                return axios.get(
                    route('api3.venue-courses', {venue: venue.id}),
                    {
                        params: {
                            type: 'Hol',
                            active: 1,
                        },
                    }
                )
                .then(response => {
                    console.log(response.data.meta.total);

                    camps_count = response.data.meta.total;
                    this_venue.camps_count = response.data.meta.total;

                    return camps_count;
                })
                .catch(error => {
                    camps_count = 'n/a';
                    this_venue.camps_count = 'n/a';

                    return camps_count;
                })
                .then(() => {
                    // Always run
                    return camps_count;
                });
            },
        }
    }
</script>

<div>{{results[venue.id]}}</div>