[Solved] How to set reactive for Vuejs and Meteor.status().status

help
1

How to set reactive then status change.
This code then status change Tag not reactive

<template>
    <div class="font name-branch">
      <Tag v-if="status=='waiting'" color="warning">Waiting</Tag>
      <Tag v-if="status=='offline'" color="error">Offline</Tag>
      <Tag v-else color="success">Connected</Tag>
   </div>
</template>
<script>
export default 
{
    computed:
    {
        status()
        {
            return Meteor.status().status;
        }
    },
}
</script>
2

Hello,
I had expereinced the same issue, but I found this workaround. I know it is not the prettiest but its working :grin:

export default {
  meteor:{
    userStatus(){
       return Meteor.status().status;
    },
  }
}
1 Like
3

Thank you. @fabianki

How to use.

<template>
    <div class="font name-branch">
      <Tag v-if="userStatus=='waiting'" color="warning">Waiting</Tag>
      <Tag v-if="userStatus=='offline'" color="error">Offline</Tag>
      <Tag v-else color="success">Connected</Tag>
   </div>
</template>
<script>
export default 
{
   meteor:{
    userStatus(){
       return Meteor.status().status;
    },
  }
}
</script>

Error.

[Vue warn]: Property or method “userStatus” is not defined on the instance but referenced during render.

4

Thank you. @fabianki
This is fixed.

import VueMeteorTracker from 'vue-meteor-tracker'
Vue.use(VueMeteorTracker);
5

sorry… i forgot that this is required

1 Like