Setting and accessing Vue.prototype values

Question

I'm trying to set a property globally, using Vue.prototype, but I'm having a bit of trouble

I have the following:

microsoftTeams.initialize();
microsoftTeams.getContext((context) => {
    Vue.prototype.$teamsContext = true;
});


new Vue({
    el: '#overview',
    components: {
        Index
    },
    data: {
       // add attributes here
    },
});

I'm guessing this prevents me from using Vue.prototype inside the getContext call as $teamsContext is never set.

Is there a way around this?

Thanks

EDIT::

I have added some more code.

In the Index component, inside the created() method, I'm doing a console.log("CONTEXT", this.$teamsContext), which returns CONTEXT undefined

What makes you think it isn't set? Are you seeing any errors? Is getContent calling your function? Put in some logging or a debugger statement to check. — skirtle
– skirtle, Commented Aug 13, 2019 at 9:28
Is getContext asynchronous? I would assume so if it takes a callback. You don't seem to be waiting for it to finish before kicking off your Vue application. That created hook will be called before you've set the value. Try putting in console logging in both places and check the order they happen. — skirtle
– skirtle, Commented Aug 13, 2019 at 9:49

Andrei Gătej · Accepted Answer · 2019-08-13 15:57:56Z

Very interesting problem.

Assuming getContext is asynchronous, my approach would be to load(mount) the app after getContext is ready.

Here's the implementation:

// main.js

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

let app;

const onResourceLoaded = () => {
  app.$mount("#app");
};

const littlePlugin = {
  async install(Vue, options) {
    // Add here your async action
    const resp = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const parsedResp = await resp.json();

    // Add global property after the action is ready
    Vue.prototype.$name = parsedResp.title;

    // Mount the app
    onResourceLoaded();
  }
};

Vue.use(littlePlugin);

app = new Vue({
  render: h => h(App)
});

Here is a live example.

NB

Because your asynchronous action might be done through a callback, you might need to wrap this into a promise:

const promisifyContext = () => new Promise(res => {
  microsoftTeams.getContext((context) => {
    resolve(context);
  });
});

// Inside `install` function
const context = await promisifyContext();
Vue.prototype.$teamsContext = context;

onResourceLoaded();

Collectives™ on Stack Overflow

Setting and accessing Vue.prototype values

1 Answer 1

NB

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

NB

Comments

Your Answer

Sign up or log in

Post as a guest

Related