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

【问题标题】：Vue.js template loop - async axios callVue.js 模板循环 - 异步 axios 调用
【发布时间】：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 的属性

标签： javascript ajax vue.js vuejs2 axios

【解决方案1】：

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

<div ref='target' />

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

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

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

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

【讨论】：