Update Vue form input from Meteor data on subscription ready

VueJS
1

Hello, I am having trouble updating a form’s default values to be set as soon as a subscription is ready. Actually I’m not sure that is the best model to do what I’d like, but it is my best idea on how to approach it so far. (Sorry I am quite new to Meteor and Vue).

mounted() {
        if (this.$subReady['activities']) {
            const recentActivity = this.activities[0];
            this.activityForm = recentActivity;
        }
    },

Based on https://github.com/meteor-vue/vue-meteor-tracker documentation I am trying the code above but it does not register the data from meteor. If I change from mounted to beforeUpdate it pulls the data but then it will repeat on every change to the data. I am only trying to set a default value if there is a recent entry, otherwise fallback to a set of default initialized values.

In case it is relevant this is the subscription code:

meteor: {
        $subscribe: {
            'activities': [],
        },
        activities() {
            return Activities.find({}, {sort: {createdAt: -1}});
        },
    },
2

I have a similar problem that I reduced down to an even simpler case of just getting a default initial value for a counter that is incremented by a button in a Vue component from a MongoDB collection containing a single counter object with a name ‘myCounter’ and a value (in practice an Astronomy class but it’s an orthogonal detail).

<template> 
  <p> {{ counterVueModel.value }} </p>
  ...
</template>

With the following code and autopublish on:

export default {
  meteor: {
    counterVueModel: function() {
      return CounterAstroClass.findOne({
        name: 'myCounter'
      });
    }
  }
};

it works fine.

But as soon as I delete autopublish and add instead:

  • on the server:
Meteor.publish('counterPub', function() {
  return CounterAstroClass.find({
    name: 'myCounter'
  });
});
  • and on the client Vue component:
mounted: function() {
    var handle;
    handle = this.$subscribe('counterPub');
    alert(handle.ready());
    return handle
  },
meteor: {
  //    $subscribe: 'counterPub'
  counterVueModel: function() {
    alert(this.$subReady.counterPub);
    return CounterAstroClass.findOne({
      name: 'myCounter'
    });
  }
}

I only get errors that handle is undefined, counterVueModel is undefined, etc.

I tried to put the subscription in other options such as created or meteor, the latter using the commented out $subscribe variable, but the result is always the same.

In my client/index file, I am using:

import VueMeteorTracker from 'vue-meteor-tracker-2.0.0-beta.3'
Vue.use(VueMeteorTracker)

I tried to move this import and use code in my Vue component instead, but got the exact same result.

I tried to substitute this.$subscribe by Meteor.subscribe to no effect.

I am not using a Meteor Method because no part of the collection is hidden on the server. The full Astronomy class definition is only on the isomorphic api file loaded on both sides.

Any bug is this code obvious to the trained eye of an experienced Meteor developer?