Updating find results for use in prop

help
1

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?)

2

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

3

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.

4

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

5

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

6

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