How can i reference body tag in vue js “right way”
I have this code in my layout file with my appSearch component:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>title</title>
</head>
<body>
<div id ='app' >
<app-search ref='search'></app-search>
@include('layouts/header')
@yield('content')
</div>
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
In the component I want to reference body tag and set it some class that will apply overflow: hidden. However vue can't be used outside div. The first thing that came to my mind is document.querySelector. But it's not 'vue-ish' way of doing this. Is there any way around it?
javascript vue.js
asked Nov 25 '18 at 10:22
ArtshellorokArtshellorok
38110
add a comment |
I have this code in my layout file with my appSearch component:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>title</title>
</head>
<body>
<div id ='app' >
<app-search ref='search'></app-search>
@include('layouts/header')
@yield('content')
</div>
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
In the component I want to reference body tag and set it some class that will apply overflow: hidden. However vue can't be used outside div. The first thing that came to my mind is document.querySelector. But it's not 'vue-ish' way of doing this. Is there any way around it?
javascript vue.js
asked Nov 25 '18 at 10:22
ArtshellorokArtshellorok
38110
It's perfectly fine to directly access the DOM in this case. I don't think there's a way around that.
– Husam Ibrahim
Nov 25 '18 at 10:36
add a comment |
I have this code in my layout file with my appSearch component:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>title</title>
</head>
<body>
<div id ='app' >
<app-search ref='search'></app-search>
@include('layouts/header')
@yield('content')
</div>
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
In the component I want to reference body tag and set it some class that will apply overflow: hidden. However vue can't be used outside div. The first thing that came to my mind is document.querySelector. But it's not 'vue-ish' way of doing this. Is there any way around it?
javascript vue.js
asked Nov 25 '18 at 10:22
ArtshellorokArtshellorok
38110
I have this code in my layout file with my appSearch component:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>title</title>
</head>
<body>
<div id ='app' >
<app-search ref='search'></app-search>
@include('layouts/header')
@yield('content')
</div>
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
In the component I want to reference body tag and set it some class that will apply overflow: hidden. However vue can't be used outside div. The first thing that came to my mind is document.querySelector. But it's not 'vue-ish' way of doing this. Is there any way around it?
javascript vue.js
javascript vue.js
asked Nov 25 '18 at 10:22
ArtshellorokArtshellorok
38110
asked Nov 25 '18 at 10:22
ArtshellorokArtshellorok
38110
asked Nov 25 '18 at 10:22
ArtshellorokArtshellorok
38110
asked Nov 25 '18 at 10:22
ArtshellorokArtshellorok
38110
asked Nov 25 '18 at 10:22
ArtshellorokArtshellorok
38110
38110
It's perfectly fine to directly access the DOM in this case. I don't think there's a way around that.
– Husam Ibrahim
Nov 25 '18 at 10:36
add a comment |
It's perfectly fine to directly access the DOM in this case. I don't think there's a way around that.
– Husam Ibrahim
Nov 25 '18 at 10:36
It's perfectly fine to directly access the DOM in this case. I don't think there's a way around that.
– Husam Ibrahim
Nov 25 '18 at 10:36
It's perfectly fine to directly access the DOM in this case. I don't think there's a way around that.
– Husam Ibrahim
Nov 25 '18 at 10:36
add a comment |
1 Answer
1
active
oldest
votes
You cannot access the body tag with Vue, but with regular JavaScript, as you mentioned. If you are manipulating the DOM you need to make sure, that the template is rendered and you can then access the HTML element e.g. in mounted(), but the <body> is already rendered at the time, your Vue app is running. So you can just use document.querySelector (or more easily just document.body as mentioned in the comments) to access the <body> tag.
It is often not needed to access the body tag directly within a Vue app. You can usually achieve the same thing in a Vueish way. In your case, you could just put a class onto to the highest element of your Vue app (the App.vue) and let this element act as your <body>. Then, you have full control over the template with Vue.
answered Nov 25 '18 at 10:35
ssc-hrep3ssc-hrep3
5,25731656
No, i can't make it act as a body element due to browsers limitations. overflow: hidden won't work the same way as it does for body element
– Artshellorok
Nov 25 '18 at 10:40
5
Note that you could usedocument.bodyinstead of usingdocument.querySelector('body').
– Quentin Veron
Nov 25 '18 at 11:11
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%2f53466561%2fhow-can-i-reference-body-tag-in-vue-js-right-way%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 cannot access the body tag with Vue, but with regular JavaScript, as you mentioned. If you are manipulating the DOM you need to make sure, that the template is rendered and you can then access the HTML element e.g. in mounted(), but the <body> is already rendered at the time, your Vue app is running. So you can just use document.querySelector (or more easily just document.body as mentioned in the comments) to access the <body> tag.
It is often not needed to access the body tag directly within a Vue app. You can usually achieve the same thing in a Vueish way. In your case, you could just put a class onto to the highest element of your Vue app (the App.vue) and let this element act as your <body>. Then, you have full control over the template with Vue.
answered Nov 25 '18 at 10:35
ssc-hrep3ssc-hrep3
5,25731656
No, i can't make it act as a body element due to browsers limitations. overflow: hidden won't work the same way as it does for body element
– Artshellorok
Nov 25 '18 at 10:40
5
Note that you could usedocument.bodyinstead of usingdocument.querySelector('body').
– Quentin Veron
Nov 25 '18 at 11:11
add a comment |
You cannot access the body tag with Vue, but with regular JavaScript, as you mentioned. If you are manipulating the DOM you need to make sure, that the template is rendered and you can then access the HTML element e.g. in mounted(), but the <body> is already rendered at the time, your Vue app is running. So you can just use document.querySelector (or more easily just document.body as mentioned in the comments) to access the <body> tag.
It is often not needed to access the body tag directly within a Vue app. You can usually achieve the same thing in a Vueish way. In your case, you could just put a class onto to the highest element of your Vue app (the App.vue) and let this element act as your <body>. Then, you have full control over the template with Vue.
answered Nov 25 '18 at 10:35
ssc-hrep3ssc-hrep3
5,25731656
No, i can't make it act as a body element due to browsers limitations. overflow: hidden won't work the same way as it does for body element
– Artshellorok
Nov 25 '18 at 10:40
5
Note that you could usedocument.bodyinstead of usingdocument.querySelector('body').
– Quentin Veron
Nov 25 '18 at 11:11
add a comment |
You cannot access the body tag with Vue, but with regular JavaScript, as you mentioned. If you are manipulating the DOM you need to make sure, that the template is rendered and you can then access the HTML element e.g. in mounted(), but the <body> is already rendered at the time, your Vue app is running. So you can just use document.querySelector (or more easily just document.body as mentioned in the comments) to access the <body> tag.
It is often not needed to access the body tag directly within a Vue app. You can usually achieve the same thing in a Vueish way. In your case, you could just put a class onto to the highest element of your Vue app (the App.vue) and let this element act as your <body>. Then, you have full control over the template with Vue.
answered Nov 25 '18 at 10:35
ssc-hrep3ssc-hrep3
5,25731656
You cannot access the body tag with Vue, but with regular JavaScript, as you mentioned. If you are manipulating the DOM you need to make sure, that the template is rendered and you can then access the HTML element e.g. in mounted(), but the <body> is already rendered at the time, your Vue app is running. So you can just use document.querySelector (or more easily just document.body as mentioned in the comments) to access the <body> tag.
It is often not needed to access the body tag directly within a Vue app. You can usually achieve the same thing in a Vueish way. In your case, you could just put a class onto to the highest element of your Vue app (the App.vue) and let this element act as your <body>. Then, you have full control over the template with Vue.
answered Nov 25 '18 at 10:35
ssc-hrep3ssc-hrep3
5,25731656
edited Nov 27 '18 at 11:03
answered Nov 25 '18 at 10:35
ssc-hrep3ssc-hrep3
5,25731656
answered Nov 25 '18 at 10:35
ssc-hrep3ssc-hrep3
5,25731656
answered Nov 25 '18 at 10:35
ssc-hrep3ssc-hrep3
5,25731656
5,25731656
No, i can't make it act as a body element due to browsers limitations. overflow: hidden won't work the same way as it does for body element
– Artshellorok
Nov 25 '18 at 10:40
5
Note that you could usedocument.bodyinstead of usingdocument.querySelector('body').
– Quentin Veron
Nov 25 '18 at 11:11
add a comment |
No, i can't make it act as a body element due to browsers limitations. overflow: hidden won't work the same way as it does for body element
– Artshellorok
Nov 25 '18 at 10:40
5
Note that you could usedocument.bodyinstead of usingdocument.querySelector('body').
– Quentin Veron
Nov 25 '18 at 11:11
No, i can't make it act as a body element due to browsers limitations. overflow: hidden won't work the same way as it does for body element
– Artshellorok
Nov 25 '18 at 10:40
No, i can't make it act as a body element due to browsers limitations. overflow: hidden won't work the same way as it does for body element
– Artshellorok
Nov 25 '18 at 10:40
5
5
Note that you could use
document.body instead of using document.querySelector('body').– Quentin Veron
Nov 25 '18 at 11:11
Note that you could use
document.body instead of using document.querySelector('body').– Quentin Veron
Nov 25 '18 at 11:11
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%2f53466561%2fhow-can-i-reference-body-tag-in-vue-js-right-way%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
It's perfectly fine to directly access the DOM in this case. I don't think there's a way around that.
– Husam Ibrahim
Nov 25 '18 at 10:36