Refresh the list items in a v-for loop once the promise has successfully resolved

Question

Refresh the list items in a v-for loop once the promise has successfully resolved

I am working on a scenario where I have a list that iterates through an array of objects, generating list items that are dependent on the current object.

As part of this process, a calculation needs to be performed with the object as a parameter, which in turn returns a promise. The problem I am facing is that once the list is rendered, it only has access to the pending promise object and does not update once the promise resolves.

<md-list id="orderList">
        <md-list-item v-for="order in orders" :key="order.id" @click="orderDialog(order)">
            {{ asyncFunction(order) }}
        </md-list-item>
 </md-list>

I am seeking advice on how to achieve the desired behavior in this situation.

javascript vue.js

Answer 1

Answer №1

If you're looking for a solution, try storing the asynchronous response in a reactive array whenever the promise is fulfilled. The reactive nature of the array will automatically display the promise response each time it returns.

<template>
    <md-list id="orderList">
        <md-list-item v-for="(order,i) in orders" :key="order.id" @click="orderDialog(order)">
            <template v-if="typeof asyncDataHolder[i] !== 'undefined'">
                {{asyncDataHolder[i]}}
            </template>
        </md-list-item>
    </md-list>
</template>

<script>
export default {
  data: {
    orders: [],
    asyncDataHolder: []
  },
  created() {
    // example: load orders
    sampleLoadOrdersData().then(response => {
      this.orders = response;
      this.loadAsyncData();
    });
  },
  methods: {
    loadAsyncData() {
      // async await method
      this.orders.map(async (order, i) => {
        const response = await asyncFunction(order);
        this.$set(this.asyncDataHolder, i, response);
      });

      // normal promise method
      this.orders.map((order, i) => {
        asyncFunction(order).then(response => {
          this.$set(this.asyncDataHolder, i, response);
        });
      });
    }
  }
};
</script>

Answer 2

If you're looking for a solution, try storing the asynchronous response in a reactive array whenever the promise is fulfilled. The reactive nature of the array will automatically display the promise response each time it returns.

<template>
    <md-list id="orderList">
        <md-list-item v-for="(order,i) in orders" :key="order.id" @click="orderDialog(order)">
            <template v-if="typeof asyncDataHolder[i] !== 'undefined'">
                {{asyncDataHolder[i]}}
            </template>
        </md-list-item>
    </md-list>
</template>

<script>
export default {
  data: {
    orders: [],
    asyncDataHolder: []
  },
  created() {
    // example: load orders
    sampleLoadOrdersData().then(response => {
      this.orders = response;
      this.loadAsyncData();
    });
  },
  methods: {
    loadAsyncData() {
      // async await method
      this.orders.map(async (order, i) => {
        const response = await asyncFunction(order);
        this.$set(this.asyncDataHolder, i, response);
      });

      // normal promise method
      this.orders.map((order, i) => {
        asyncFunction(order).then(response => {
          this.$set(this.asyncDataHolder, i, response);
        });
      });
    }
  }
};
</script>

Refresh the list items in a v-for loop once the promise has successfully resolved

Answer №1

Similar questions

Generating fresh Mongodb Records versus Appending to a Document's Collection

Shifting hues of dots within a grid according to the passing of time

Error encountered: JSHint is flagging issues with setting a background gradient using

Assigning automatic roles based on the Discord.js v12 presence status of users

show the day of the week for a specific date saved in a MongoDB database

Implicitly pass "this" by utilizing an inline event listener

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Choosing JavaScript

The model fails to update when a blur event occurs

Struggling with transferring a JavaScript array to the current page using AJAX

Error encountered in React V16.7: The function is not valid and cannot be executed

"Toggling the parent element through jQuery within a search function

Is it possible to modify the colors within a JavaScript string?

How can I implement a thumbnail editing feature similar to Facebook's display image uploader in an Asp.net application using c#?

Is there a way to change the domain for all relative URLs on an HTML page to a different one that is not its current domain, including in HTML elements and JavaScript HTTP Requests?

Restrict the number of rows in a CSS grid

remove leading spaces in JavaScript after retrieving data from database

JS Data error: The attributes provided must include the property indicated by idAttribute - particularly with regards to hasMany relationships

Sorting a collection of objects into separate arrays

"Every time an Ajax call is successful, the 'else' clause in