It seems like the issue lies in the timing rather than being related to asynchronous operations. I'm currently iterating through an object and displaying a list of items. One of the values requires calculation using a method.
While the direct values on the item object display correctly, the calculated one doesn't show up consistently even though it's logged in the console.
I've attempted to re-render the list by changing keys without success. I also tried turning it into a computed property but encountered issues where it wasn't recognized as a function.
<ul>
<li
v-for="(item, index) in list"
:key="index"
class="list-wrap"
>
<span>
{{ item.name }} <---- this value displays every time.
</span>
<span class="location">
{{ getLocation(item.Location[0]) }} <---- this calculated value only shows sporadically.
</span>
</li>
</ul>
Method for getLocation:
methods: {
getLocation(loc) { // ID retrieved from item in loop
this.locations.forEach((location) => { // Iterate through locations object, match ID, return location name.
let match;
if (location.id === loc) {
match = location.name;
console.log(match); <---- appears correct on each refresh
return match; <--- not rendering
}
});
},
},
// List is generated in an asynchronous API call
async getCurUserTransfers() {
await airtableQuery
.getTableAsync("Transfers", 100, "Grid view")
.then((data) => {
this.list = data.filter( // List is a filtered table.
(transfer) =>
transfer.fields.User === this.curUserNicename ||
transfer.fields.User === this.curUserDisplayName
);
});
},