javascript - 为什么不能在 vue 模板中使用窗口?
问题描述
我在窗口对象中设置了一个属性以在全局范围内使用它,如下所示:
window.configs.foo=true;
但是当像这样使用它时:
<v-btn v-if="window.configs.foo">go</v-btn>
在控制台中,我收到此错误:
[Vue 警告]:属性或方法“窗口”未在实例上定义,但在渲染期间被引用。通过初始化该属性,确保该属性是反应性的,无论是在数据选项中,还是对于基于类的组件。
我如何在 vueJs 模板中使用窗口对象?
解决方案
因为v-if
旨在用于组件的属性。您不能v-if
覆盖全局范围内或组件数据或属性之外的变量。
相反,如果在目标组件上设置计算属性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;
}
}
})
更新:
如果您必须在很多站点中重用它,您可以做两件事:
Vuex
使用 vuex将其设置showMyButton
为 vuex 状态。然后您可以通过以下方式访问它:
v-if="$store.state.showMyButton"
你可以通过标准的 vuex 突变来修改它。
混合
也许由于某种原因你不想使用 vuex。然后在许多组件中重用逻辑的一种方法是使用 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>`
})
推荐阅读
- azure - Azure 数据工厂 - 数据流
- c - 如何修复我的函数中的条件?
- java - 类“类名”中的构造函数“名称”不能应用于房间持久性库中的给定类型
- azure - Azure AD 中的 API 权限和公开 API 有什么区别?
- python - 根据python中的年份计算存储在excel / .CSV文件中的值的气候平均值
- javascript - 当我使用简单的javascript单击按钮时,如何在div标签中的另一个文件上添加一些Html代码
- react-native - 在本机反应中设置 goBack 上的导航参数
- python - Python排序函数
- python - 为什么我的冒泡排序代码不能正常工作?
- javascript - 在java脚本中上传图片时如何限制.exe扩展名?/