Vue - How to use window object inside v-if or components
I'm trying to use the window object inside a Vue condition:
<li v-if="window.SpeechRecognition || window.webkitSpeechRecognition">
<a href="#">Voice</a>
</li>
But I'm getting the following 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 can I work around this error and only display the HTML element if the user's browser has support for the functions SpeechRecognition?
javascript vue.js
asked Nov 14 '18 at 14:20
Caio KawasakiCaio Kawasaki
1,19021537
add a comment |
I'm trying to use the window object inside a Vue condition:
<li v-if="window.SpeechRecognition || window.webkitSpeechRecognition">
<a href="#">Voice</a>
</li>
But I'm getting the following 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 can I work around this error and only display the HTML element if the user's browser has support for the functions SpeechRecognition?
javascript vue.js
asked Nov 14 '18 at 14:20
Caio KawasakiCaio Kawasaki
1,19021537
Does this answer in the Vue forums help?
– vahdet
Nov 14 '18 at 14:24
What vahdet linked. To explain... while in the DOM the scope is "this" (the component) so it is trying to do this.window. instead of window.
– Marc Newton
Nov 14 '18 at 14:27
add a comment |
I'm trying to use the window object inside a Vue condition:
<li v-if="window.SpeechRecognition || window.webkitSpeechRecognition">
<a href="#">Voice</a>
</li>
But I'm getting the following 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 can I work around this error and only display the HTML element if the user's browser has support for the functions SpeechRecognition?
javascript vue.js
asked Nov 14 '18 at 14:20
Caio KawasakiCaio Kawasaki
1,19021537
I'm trying to use the window object inside a Vue condition:
<li v-if="window.SpeechRecognition || window.webkitSpeechRecognition">
<a href="#">Voice</a>
</li>
But I'm getting the following 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 can I work around this error and only display the HTML element if the user's browser has support for the functions SpeechRecognition?
javascript vue.js
javascript vue.js
asked Nov 14 '18 at 14:20
Caio KawasakiCaio Kawasaki
1,19021537
asked Nov 14 '18 at 14:20
Caio KawasakiCaio Kawasaki
1,19021537
edited Nov 14 '18 at 14:43
Caio Kawasaki
asked Nov 14 '18 at 14:20
Caio KawasakiCaio Kawasaki
1,19021537
asked Nov 14 '18 at 14:20
Caio KawasakiCaio Kawasaki
1,19021537
asked Nov 14 '18 at 14:20
Caio KawasakiCaio Kawasaki
1,19021537
1,19021537
Does this answer in the Vue forums help?
– vahdet
Nov 14 '18 at 14:24
What vahdet linked. To explain... while in the DOM the scope is "this" (the component) so it is trying to do this.window. instead of window.
– Marc Newton
Nov 14 '18 at 14:27
add a comment |
Does this answer in the Vue forums help?
– vahdet
Nov 14 '18 at 14:24
What vahdet linked. To explain... while in the DOM the scope is "this" (the component) so it is trying to do this.window. instead of window.
– Marc Newton
Nov 14 '18 at 14:27
Does this answer in the Vue forums help?
– vahdet
Nov 14 '18 at 14:24
Does this answer in the Vue forums help?
– vahdet
Nov 14 '18 at 14:24
What vahdet linked. To explain... while in the DOM the scope is "this" (the component) so it is trying to do this.window. instead of window.
– Marc Newton
Nov 14 '18 at 14:27
What vahdet linked. To explain... while in the DOM the scope is "this" (the component) so it is trying to do this.window. instead of window.
– Marc Newton
Nov 14 '18 at 14:27
add a comment |
1 Answer
1
active
oldest
votes
You can only reference variables in the template that are scoped to the related Vue instance. The warning is saying that your Vue instance doesn't have a property or method named window (which isn't what you are trying to refer to anyway).
Just set a data property on the Vue instance (speechRecognition or whatever) to the value in your v-if statement and then reference that instead of trying to directly access the window object from inside your template (which can't be done):
data() {
return {
speechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
}
}
<li v-if="speechRecognition">
<a href="#">Voice</a>
</li>
answered Nov 14 '18 at 14:26
thanksdthanksd
23.7k106676
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53302371%2fvue-how-to-use-window-object-inside-v-if-or-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can only reference variables in the template that are scoped to the related Vue instance. The warning is saying that your Vue instance doesn't have a property or method named window (which isn't what you are trying to refer to anyway).
Just set a data property on the Vue instance (speechRecognition or whatever) to the value in your v-if statement and then reference that instead of trying to directly access the window object from inside your template (which can't be done):
data() {
return {
speechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
}
}
<li v-if="speechRecognition">
<a href="#">Voice</a>
</li>
answered Nov 14 '18 at 14:26
thanksdthanksd
23.7k106676
add a comment |
You can only reference variables in the template that are scoped to the related Vue instance. The warning is saying that your Vue instance doesn't have a property or method named window (which isn't what you are trying to refer to anyway).
Just set a data property on the Vue instance (speechRecognition or whatever) to the value in your v-if statement and then reference that instead of trying to directly access the window object from inside your template (which can't be done):
data() {
return {
speechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
}
}
<li v-if="speechRecognition">
<a href="#">Voice</a>
</li>
answered Nov 14 '18 at 14:26
thanksdthanksd
23.7k106676
add a comment |
You can only reference variables in the template that are scoped to the related Vue instance. The warning is saying that your Vue instance doesn't have a property or method named window (which isn't what you are trying to refer to anyway).
Just set a data property on the Vue instance (speechRecognition or whatever) to the value in your v-if statement and then reference that instead of trying to directly access the window object from inside your template (which can't be done):
data() {
return {
speechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
}
}
<li v-if="speechRecognition">
<a href="#">Voice</a>
</li>
answered Nov 14 '18 at 14:26
thanksdthanksd
23.7k106676
You can only reference variables in the template that are scoped to the related Vue instance. The warning is saying that your Vue instance doesn't have a property or method named window (which isn't what you are trying to refer to anyway).
Just set a data property on the Vue instance (speechRecognition or whatever) to the value in your v-if statement and then reference that instead of trying to directly access the window object from inside your template (which can't be done):
data() {
return {
speechRecognition: window.SpeechRecognition || window.webkitSpeechRecognition,
}
}
<li v-if="speechRecognition">
<a href="#">Voice</a>
</li>
answered Nov 14 '18 at 14:26
thanksdthanksd
23.7k106676
answered Nov 14 '18 at 14:26
thanksdthanksd
23.7k106676
answered Nov 14 '18 at 14:26
thanksdthanksd
23.7k106676
answered Nov 14 '18 at 14:26
thanksdthanksd
23.7k106676
23.7k106676
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53302371%2fvue-how-to-use-window-object-inside-v-if-or-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Does this answer in the Vue forums help?
– vahdet
Nov 14 '18 at 14:24
What vahdet linked. To explain... while in the DOM the scope is "this" (the component) so it is trying to do this.window. instead of window.
– Marc Newton
Nov 14 '18 at 14:27