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

Question

我正在遍历数组并呈现 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>

Answer 1

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

<div ref='target' />

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

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

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

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