I have a template which renders a list from an array of objects (liveMatchesData) returned by a computed property. The template uses conditional rendering to check that a.) the array is not null and b.) the array length is > 0. The computed property returns the array by accessing a Vuex state which is an array and initialised as such.
<div class="matches" v-if="liveMatchesData!= null&& liveMatchesData.length > 0">
My issue is that occasionally the computed property returns null which in turn clears the liveMatchesData list from the DOM, leaving a blank space. This stays like this until a few seconds later when the state updates (Axios calls to an API), the computed property is no longer null and so the template renders correctly once again.
Is there a way to keep the previously rendered list visible in the DOM when the computed property changes to null and prevent the update when the value is null?
I realise the problem here may be my state should not be returning null all but for the moment it is.