Cannot read properties of undefined (reading 'find') in Vue.js Meteor-CodePudding

Im following the tutorial here...

So its obviously an available object.

Just the find({}).fetch() method on it doesnt seem to be available??

UPDATE:

THE ANSWER BELOW WORKED (kind of)

experiments() {
  let experimentsData = Experiments.find({}).fetch();
  if (this.$subReady.experiments) {
    console.log(experimentsData);
    return experimentsData;
  }
},

This now returns the experiments in the console log. So they are available. However rendering them to the template doesnt.

<h2>Experiments</h2>
<div v-for="exp in experiments" :key="exp.id">
  {{exp.name}}
</div>

Any idea why?? Does it have to be put into a vue data object? Computed?? I thought the meteor:{} object acted kinda like computed, but it appears not??

How do I get the data onto the screen??

CodePudding user response：

It looks like you need to just use this.$subReady in your 'experiments` function to handle the timing of how the data comes in over DDP in Meteor.

I use something like this in all my subscriptions.

When the subscription starts up, the data won't be delivered from the publication the very 1st time, so that is what causes your undefined error that you are getting.

I love the Vue Meteor combo. You can also come join the community Slack or Forum if you have questions, there are a bunch of us to help you there.

Happy Coding!

Bob

experiments () {

  let experimentsData = Experiments.find({}).fetch();

  if(this.$subReady.experiments){
        return experimentsData;
   }
},