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

Posted 2023-02-22

【中文标题】Vue.js 模板循环 - 异步 axios 调用

【英文标题】：Vue.js template loop - async axios call

【发布时间】：2020-11-07 04:37:00

【问题描述】：

我正在循环一个数组并渲染一个 html 模板，这很好用。对于其中一列，我需要使用 axios 执行额外的 AJAX 调用，因此每行获取数据。

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

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

例如：

<tr v-for="venue in venue_results" :key="venue.id">
    <td class="border px-4 py-2"> venue.name </td>
    <td class="border px-4 py-2"> getCampsCount(venue)   venue.camps_count </td>
    <!-- <td class="border px-4 py-2"> venue.active_events </td> -->
</tr>

<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>

【问题讨论】：

您不应该像这样直接在模板中调用数据获取操作（或任何改变组件状态以触发重新渲染的操作）。只需在模板之外调用getCampsCount，例如在created 钩子内或其他适当的地方。

您不应该在每次重新渲染 DOM 时都进行获取。这是昂贵且不必要的。相反，一次性使用异步数据填充整个venue_results。不要为遇到的每一行都发出一个请求，而是尝试将它们全部捆绑到一个请求中。

您最好在服务器端获取 camps_count 并将其与 venue_results 一起返回，因此它是循环中 venue 的属性

【参考方案1】：

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

<div ref='target' />

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

您还可以创建一个数据成员，绑定到它，然后在您的异步处理程序中更新。

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

this.results[venue.id] = 'The Value'