[Vuejs]-Computed property not working when using `Object.values()`

by

0👍

The below snippet and words are form Vue documentation here

Consider,

const author = reactive({
 name: 'John Doe',
 books: [
   'Vue 2 - Advanced Guide',
   'Vue 3 - Basic Guide',
   'Vue 4 - The Mystery'
 ]
})

// in component
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as author.books has not changed, multiple access to publishedBooksMessage will immediately return the previously computed result without having to run the getter function again.

This also means the following computed property will never update, because Date.now() is not a reactive dependency:

const now = computed(() => Date.now())

So, for your question, since gql is not a reactive property, it does not fire update for the computed property.

0👍

Urql’s .fetching is a ref<boolean>. That means that the code needs to be adjusted to

const loading = computed(() => Object.values(gql)
  .map(query => query.fetching)
  .some(isFetching => isFetching.value)); // add .value access

otherwise the reference that is isFetching will always be truthy.

Then how did the other example work? Well, it all comes down to the fact that "" || 7 is not true but 7. So ref(false) || ref(true) will just be ref(false). Effectively, my loading property was just tracking the first of all the queries, which gave the impression that it was at least doing something. Not the right thing, though.

Leave a comment