Vue.js 템플릿 루프 - 비동기식 공리 호출

Vue.js 템플릿 루프 - 비동기식 공리 호출

어레이를 반복해서 HTML 템플릿을 렌더링하고 있는데, 잘 되네.열 중 하나에 대해서는 공리를 사용하여 AJAX 호출을 추가로 수행해야 하므로 행당 데이터를 가져오십시오.

그러나 AJAX 호출이 완료된 후 업데이트할 템플릿을 가져올 수 없음.나는 루프 변수를 참조로 전달하려고 시도했고 공리에서 Promise를 반환하려고 시도했다.

비동기 호출이 어떻게 작동해야 하는지에 대한 기본 전제를 이해한다고 생각하지만, 뷰 템플릿/구성 요소 내에서 이 설정을 위한 올바른 방법을 찾을 수 없다.

예:

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

루프의 참조를 사용하고 색인을 통해 액세스하십시오.

<div ref='target' />

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

또한 데이터 구성원을 생성하고 이에 바인딩하고 비동기 처리기에서 업데이트할 수 있다.

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

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

참조URL: https://stackoverflow.com/questions/62952826/vue-js-template-loop-async-axios-call