Updating find results for use in prop

I am using Meteor with Vue and I have the following problem, where I don’t know whether it is more Vue or Meteor releated,

  1. In the Meteor part of Vue component 1 havea methodbooks() which returns the results of a find().fetch() on a Collection.
  2. A method listItemsV1 takes this.books and does some modifications, in particular it indicates whether tha list item has status open or closed.
  3. Its output is fed into Vue component 2 as a prop listItems.
  4. In Vue component 2, the prop is copied in a lokal property in the data() part:
    MyListItems: this.listItems.
  5. MyListItems is used in a v-for loop to display the list.

Problem: On mount of Component 2 the array MyListItems is empty.

Note 1: When the value of the prop is not taken from the collection but provided as a static array, th output is ok.

Note 2: When I switch in Component 1 (in dev mode) from the static prop to the dynamically generated prop the dynamic prop appears. But when I reload the components it vanishes.

Any help is appreciated. Code can be provided (where?)

Hi @dahn can you provide the code? you can use gist ou a new repo as well

Thanks for looking at this: Updating prop from collection · GitHub

I should add that I use Meteor 2.6.1 and Vue 2 under Win11.

One thing to note is that you have defined only the books prop under the props object in component 2, missing the listItems one.

Thanks for noting this, it happened when I translated my code to the more generic terminology. I have updated the Gist.

More info: I observed also the following behaviour:
When I access Component 1 as well as another Component 3 via Vue Router, the system behaves as follows:

  • Being on the route to Component 1, a reload shows an empty list
  • Being on the route to Component 3, a reload shows component 3 and - switching to the route of Component 1 - I get the expected list content of Component 2