[SOLVED] v-if / watchers not revaluating

[n.taddei]

Hi, here’s the problem.
I have a component called Companies.vue that has a Collection object in its data object.
This Collection object is initialized by default like this:

data () {
    return {
      collection: new Collection('companies')
    }
  },

Inside this object Collection I have a bunch of things like data, errors, and many others.
I fetch data from an external source via Rest API with Axios so, at the beginning, data and errors are empty objects.

constructor (resource, paginated = true) {
    this.resource = resource
    this.paginated = paginated
    this.errors = {}
    this.data = {}
    this.pagination = {
      limit: 10,
      page: 1,
      total: 0
    }
  }

Inside Company vue component I have a <div> showing when some errors are thrown due to API request failed.

<div v-if="collection.errors.fetch" :error="collection.errors.fetch">
  {{ collection.errors.fetch.toString() }}
</div>

Now the problem is that once I called fetch function on component mounted() handler, the directive v-if don’t revaluate its guard and doesn’t show nothing.

But if under the <div> I add a list of objects contained in data with v-for directive this will cause a refresh of component view and error is shown correctly.
This works if data is an empty object and I have to render a list, but will not work in other 2 cases:

• When data is null, because I think v-for is ignored in that case.
• When I haven’t to render a list but simply check error and data in other way (setting data = null). In that case nothing will cause component refreshing and, in case of error, nothing is shown.

Is it a Quasar problem? Because I see that in Laracast Vue learning there is an example where objects are used and v-if guard is revaluated correctly.

This is the example reference: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20

Anyone can help? I’m quite worried about that.

[s.molinari]

In that Laracast, the goal is sending out data, not getting any on the initial loading of the form. So, if you are loading data at first, you are going to have to initialize the form as you need it, including any data or props needed for the v-if, in order to have it do as you like.

Scott

[n.taddei]

I finally got the point looking at Vue guide reactivity chapter (https://vuejs.org/v2/guide/reactivity.html)
In fact property added after Component initalization are not watched at all.
The best solution is replace the entire error object in that case.

Thank you anyway, I set this as solved.