Overriding the value of a global variable

Question

I just created two variables $isCompany and $isLoggedIn in my main.js.

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

Vue.config.productionTip = false;
Vue.prototype.$isCompany = true;
Vue.prototype.$isLoggedIn = true;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

My Question: How can I access these variables in my <Button> component in Navigation.vue? v-ifs are working but I'm not able to toggle the value of the variable, so I think there is an issue with overriding the value.

<div v-if="this.$isLoggedIn" class="header-left">
  <User v-if="this.$isCompany" name="Company" img="..."></User>
  <User v-if="!this.$isCompany" name="Not Company" img="..."></User>
  <Button @onclick="this.$isCompany = !this.$isCompany" :color="'grey'" :isIconOnly="true"><b-icon icon="arrow-down-up"></b-icon></Button>
</div>

If you need it, here is the way how I bind the @onclick to my <Button> component:

<button @click="$emit('onclick')" :class="['button', 'size-'+size, 'color-'+color, isRounded ? 'type-rounded' : '', isIconOnly ? 'type-icon-only' : '']">

EDIT: Just noticed this error in my console if I click the button:

Answer 1

v-ifs are working

Are you sure? I expect v-if="this.$isLoggedIn" not to work because this should not be used here (it is redundant; there is an implicit this. already there so you're basically doing this.this.$isLoggedIn).

but I'm not able to toggle the value of the variable

This is probably because you have not defined the variables in a "reactive" way.

Vue.prototype.$isCompany = true;
Vue.prototype.$isLoggedIn = true;

It feels a bit awkward to define the variables like this on the Vue prototype object.

You can define the global variables in a reactive way by defining them as data properties of the root Vue instance:

new Vue({
  router,
  render: h => h(App),

  data: {
    isCompany: false,
    isLoggedIn: false,
  }
}).$mount("#app");

You can access them from any descendant component via this.$root.isCompany. So, in your template, you would do:

<User v-if="$root.isCompany" name="Company" img="..."></User>

If you really want to avoid doing $root. in the template, then you can define proxy properties on the Vue prototype object (in addition to the above):

Object.defineProperties(Vue.prototype, {
  $isCompany: {
    get() { return this.$root.isCompany },
    set(x) { this.$root.isCompany = x }
  },
  $isLoggedIn: {
    get() { return this.$root.isLoggedIn },
    set(x) { this.$root.isLoggedIn = x }
  },
})

Now you can do this in the template:

<User v-if="$isCompany" name="Company" img="..."></User>

Here is a small demo:

Object.defineProperties(Vue.prototype, {
  $isCompany: {
    get() { return this.$root.isCompany },
    set(x) { this.$root.isCompany = x }
  }
})

Vue.component('child', {
  template: '<div><input type="checkbox" v-model="$isCompany"> {{ $isCompany }}</div>'
})

new Vue({
  el: '#app',
  data: {
    isCompany: false,
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <child></child>
</div>