why can't use window in vue template?

11
votes

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?

2
javascriptvue.js
You should never use global window variables in a vue application. This is because the window var can be targeted by anything, even JS code that is not part of your app. Instead, you can use environment variables (if the goal is to have different config settings), or you can use VueX (if the goal is to have all kinds of data globally available) - Kokodoko
@Kokodoko , thank you. i understand what you said. - Farshid Rezaei
@Kokodoko Sure уоu can use window variables in the a Vue app. What уоu shouldn't do is include JS code that is not part of your app. Why would уоu include JS code that is not part of your app anyway? - Max

2 Answers

3
votes

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

3
votes

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>`
})