why can't use window in vue template?

Question

i set a property in window Object for using it globally, like this:

window.configs.foo=true;

but when use it like this:

<v-btn v-if="window.configs.foo">go</v-btn>

in console, i get this error:

[Vue warn]: Property or method "window" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

---

how i can use window object in vueJs template?

Answer 1

Because v-if is intended to be used on properties of your component. You cannot v-if over variables in global scope, or outside your component data or properties.

What you can do, instead, if to setup a computed property on your component that targets window.configs.foo:

new Vue({ // or maybe a component, this depend on how you're using it
    template: `<div>
      <v-btn v-if="showMyButton">...</v-btn>
    </div>`
    computed: {
      showMyButton() {
        return window.configs && window.configs.foo;
      }
    }
})

UPDATE:

If you have to reuse this in a lot of sites, there are two things that you can do:

Vuex

Using vuex to set the showMyButton as a vuex state. Then you can access it via:

v-if="$store.state.showMyButton"

And you can modify it via standard vuex mutations.

 Mixins

Maybe for some reason you don't want to use vuex. Then a way to reuse logic across many components is to use mixins.

const configAwareMixin = {
  computed: {
    showButton() {
      return window.configs.foo;
    }
  }
}

// And then in your component:

Vue.component('stuff', {
  mixins: [buttonAwareMixin],
  template: `<div><v-btn v-if="showButton"></v-btn></div>`
}) 

Answer 2

Well, Alternate is to use $root in Vue. Define foo at your vue instance and it will be available in all the component with this.$root.foo.

Here is the official docs

Hope this helps