为啥不能在 vue 模板中使用窗口?
Posted
技术标签:
【中文标题】为啥不能在 vue 模板中使用窗口?【英文标题】:why can't use window in vue template?为什么不能在 vue 模板中使用窗口? 【发布时间】:2019-08-14 19:42:39 【问题描述】:我在窗口对象中设置了一个属性以全局使用它,如下所示:
window.configs.foo=true;
但是当这样使用它时:
<v-btn v-if="window.configs.foo">go</v-btn>
在控制台中,我收到此错误:
[Vue 警告]:实例上未定义属性或方法“窗口” 但在渲染期间引用。确保该属性是 反应式,无论是在数据选项中,还是对于基于类的组件,通过 初始化属性。
如何在 vueJs 模板中使用 window 对象?
【问题讨论】:
你不应该在 vue 应用程序中使用全局窗口变量。这是因为 window var 可以被任何东西作为目标,甚至是不属于您的应用程序的 JS 代码。相反,您可以使用environment variables
(如果目标是拥有不同的配置设置),或者您可以使用VueX
(如果目标是让各种数据全局可用)
@Kokodoko,谢谢。我明白你说的。
@Kokodoko 当然你可以在 Vue 应用程序中使用窗口变量。你不应该做的是包含不属于你的应用程序的 JS 代码。为什么你要包含不属于你的应用程序的 JS 代码?
【参考方案1】:
因为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修改它。
混合
也许出于某种原因你不想使用 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>`
)
【讨论】:
我有很多组件需要这个变量。而且我不喜欢在每个组件中定义计算变量。你知道我应该做什么吗?【参考方案2】:嗯,替代方法是在 Vue 中使用 $root。在你的 vue 实例中定义foo
,它将在所有带有this.$root.foo
的组件中可用。
这里是官方docs
希望对你有帮助
【讨论】:
this.$root 没有在模态组件中定义:( 它不会处于模态,因为模态会传递来自解除事件的数据。以上是关于为啥不能在 vue 模板中使用窗口?的主要内容,如果未能解决你的问题,请参考以下文章
为啥我不能在 python 诅咒窗口中将str()添加到最后一行/列?