Question

我在window Object中设置了一个属性以供全局使用，如下所示：

window.configs.foo=true;

但是当这样使用时：

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

在控制台中，出现此错误：

[Vue警告]：在实例上未定义属性或方法“窗口” 但在渲染期间引用。确保此属性是在data选项中或对于基于类的组件，通过初始化属性。

我如何在vueJs模板中使用窗口对象？

Answer 1

好吧，Alternate将在Vue中使用$ root。在您的vue实例中定义foo，它将在所有带有this.$root.foo的组件中可用。

这是官方的docs

希望这会有所帮助

Answer 2

因为v-if用于组件的属性。您不能v-if遍历全局范围内或组件数据或属性之外的变量。

如果您要在针对window.configs.foo的组件上设置computed property，则可以做些什么：

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

更新：

如果必须在许多站点中重复使用此功能，则可以做两件事：

Vuex

Using vuex将showMyButton设置为vuex状态。然后您可以通过以下方式访问它：

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

您可以通过标准vuex mutations对其进行修改。

Mixins

也许出于某些原因，您不想使用vuex。然后，可以在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>`
})

为什么不能在vue模板中使用window？

2 个答案:

Vuex

Mixins