Vue-如何在v-if或组件中使用窗口对象

Question

我正在尝试在Vue条件内使用window对象：

<li v-if="window.SpeechRecognition || window.webkitSpeechRecognition">
    <a href="#">Voice</a>
</li>

但我收到以下错误：

[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.

如何解决此错误，并且仅在用户的浏览器支持这些功能时才显示HTML元素SpeechRecognition？

Answer 1

您只能在模板中引用范围为相关Vue实例的变量。警告是说您的Vue实例没有命名的属性或方法window（无论如何，这都不是您要引用的内容）。

只需将Vue实例（speechRecognition或其他任何实例）上的data属性设置为v-if语句中的值，然后引用该值即可，而不是尝试window从模板内部直接访问该对象（无法完成）：

data() {
  return {
    speechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
  }
}

<li v-if="speechRecognition">
  <a href="#">Voice</a>
</li>