Defining component on data or computed section vue
0
I am new to vue and wanted to know if it is possible to define my component in my data or computed section ?
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<NavBar :items="['Home', 'Database', 'About']" />
<ActiveComponent />
</div>
</template>
<script>
import NavBar from './components/NavBar.vue'
import routes from './routes/index.js';
export default {
name: 'app',
components: {
NavBar,
},
data: function() {
return {
activeLocation: window.location.pathname,
}
},
computed: {
ActiveComponent() {
return routes[this.activeLocation] || routes.notFound
}
}
}
</script>
You see what I am trying to do. I want to use <ActiveComponent /> but I am defining it in computed section based on the route selected.
Is there a way to do this ?
vue.js
asked Jan 3 at 13:44
PrasannaPrasanna
1,528618
|
show 1 more comment
0
I am new to vue and wanted to know if it is possible to define my component in my data or computed section ?
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<NavBar :items="['Home', 'Database', 'About']" />
<ActiveComponent />
</div>
</template>
<script>
import NavBar from './components/NavBar.vue'
import routes from './routes/index.js';
export default {
name: 'app',
components: {
NavBar,
},
data: function() {
return {
activeLocation: window.location.pathname,
}
},
computed: {
ActiveComponent() {
return routes[this.activeLocation] || routes.notFound
}
}
}
</script>
You see what I am trying to do. I want to use <ActiveComponent /> but I am defining it in computed section based on the route selected.
Is there a way to do this ?
vue.js
asked Jan 3 at 13:44
PrasannaPrasanna
1,528618
Are you looking at something like Dynamic Components? vuejs.org/v2/guide/components.html#Dynamic-Components
– Federico Quagliotto
Jan 3 at 13:47
@FedericoQuagliotto I just found a way to do what I was looking for! should I answer my own question here ? what is the flow ?
– Prasanna
Jan 3 at 13:53
have you seen router.vuejs.org vue-router? i think that swap the component on the fly on this way is a bit dangerous.. have a look to the lifecycle of a vue component (vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)
– Federico Quagliotto
Jan 3 at 13:58
@FedericoQuagliotto I looked into the router but I am not able to get my base component (template) to exist everywhere with it! I want NavBar to be present on every page. But with router, I would have to define that NavBar component on every page I am making!
– Prasanna
Jan 3 at 14:02
1
well… you can also declare your main template and put in there the<router-view>tag. router.vuejs.org/guide have a look to the example html parts
– Federico Quagliotto
Jan 3 at 14:03
|
show 1 more comment
0
0
0
I am new to vue and wanted to know if it is possible to define my component in my data or computed section ?
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<NavBar :items="['Home', 'Database', 'About']" />
<ActiveComponent />
</div>
</template>
<script>
import NavBar from './components/NavBar.vue'
import routes from './routes/index.js';
export default {
name: 'app',
components: {
NavBar,
},
data: function() {
return {
activeLocation: window.location.pathname,
}
},
computed: {
ActiveComponent() {
return routes[this.activeLocation] || routes.notFound
}
}
}
</script>
You see what I am trying to do. I want to use <ActiveComponent /> but I am defining it in computed section based on the route selected.
Is there a way to do this ?
vue.js
asked Jan 3 at 13:44
PrasannaPrasanna
1,528618
I am new to vue and wanted to know if it is possible to define my component in my data or computed section ?
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<NavBar :items="['Home', 'Database', 'About']" />
<ActiveComponent />
</div>
</template>
<script>
import NavBar from './components/NavBar.vue'
import routes from './routes/index.js';
export default {
name: 'app',
components: {
NavBar,
},
data: function() {
return {
activeLocation: window.location.pathname,
}
},
computed: {
ActiveComponent() {
return routes[this.activeLocation] || routes.notFound
}
}
}
</script>
You see what I am trying to do. I want to use <ActiveComponent /> but I am defining it in computed section based on the route selected.
Is there a way to do this ?
vue.js
vue.js
asked Jan 3 at 13:44
PrasannaPrasanna
1,528618
asked Jan 3 at 13:44
PrasannaPrasanna
1,528618
asked Jan 3 at 13:44
PrasannaPrasanna
1,528618
asked Jan 3 at 13:44
PrasannaPrasanna
1,528618
asked Jan 3 at 13:44
PrasannaPrasanna
1,528618
1,528618
Are you looking at something like Dynamic Components? vuejs.org/v2/guide/components.html#Dynamic-Components
– Federico Quagliotto
Jan 3 at 13:47
@FedericoQuagliotto I just found a way to do what I was looking for! should I answer my own question here ? what is the flow ?
– Prasanna
Jan 3 at 13:53
have you seen router.vuejs.org vue-router? i think that swap the component on the fly on this way is a bit dangerous.. have a look to the lifecycle of a vue component (vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)
– Federico Quagliotto
Jan 3 at 13:58
@FedericoQuagliotto I looked into the router but I am not able to get my base component (template) to exist everywhere with it! I want NavBar to be present on every page. But with router, I would have to define that NavBar component on every page I am making!
– Prasanna
Jan 3 at 14:02
1
well… you can also declare your main template and put in there the<router-view>tag. router.vuejs.org/guide have a look to the example html parts
– Federico Quagliotto
Jan 3 at 14:03
|
show 1 more comment
Are you looking at something like Dynamic Components? vuejs.org/v2/guide/components.html#Dynamic-Components
– Federico Quagliotto
Jan 3 at 13:47
@FedericoQuagliotto I just found a way to do what I was looking for! should I answer my own question here ? what is the flow ?
– Prasanna
Jan 3 at 13:53
have you seen router.vuejs.org vue-router? i think that swap the component on the fly on this way is a bit dangerous.. have a look to the lifecycle of a vue component (vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)
– Federico Quagliotto
Jan 3 at 13:58
@FedericoQuagliotto I looked into the router but I am not able to get my base component (template) to exist everywhere with it! I want NavBar to be present on every page. But with router, I would have to define that NavBar component on every page I am making!
– Prasanna
Jan 3 at 14:02
1
well… you can also declare your main template and put in there the<router-view>tag. router.vuejs.org/guide have a look to the example html parts
– Federico Quagliotto
Jan 3 at 14:03
Are you looking at something like Dynamic Components? vuejs.org/v2/guide/components.html#Dynamic-Components
– Federico Quagliotto
Jan 3 at 13:47
Are you looking at something like Dynamic Components? vuejs.org/v2/guide/components.html#Dynamic-Components
– Federico Quagliotto
Jan 3 at 13:47
@FedericoQuagliotto I just found a way to do what I was looking for! should I answer my own question here ? what is the flow ?
– Prasanna
Jan 3 at 13:53
@FedericoQuagliotto I just found a way to do what I was looking for! should I answer my own question here ? what is the flow ?
– Prasanna
Jan 3 at 13:53
have you seen router.vuejs.org vue-router? i think that swap the component on the fly on this way is a bit dangerous.. have a look to the lifecycle of a vue component (vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)
– Federico Quagliotto
Jan 3 at 13:58
have you seen router.vuejs.org vue-router? i think that swap the component on the fly on this way is a bit dangerous.. have a look to the lifecycle of a vue component (vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)
– Federico Quagliotto
Jan 3 at 13:58
@FedericoQuagliotto I looked into the router but I am not able to get my base component (template) to exist everywhere with it! I want NavBar to be present on every page. But with router, I would have to define that NavBar component on every page I am making!
– Prasanna
Jan 3 at 14:02
@FedericoQuagliotto I looked into the router but I am not able to get my base component (template) to exist everywhere with it! I want NavBar to be present on every page. But with router, I would have to define that NavBar component on every page I am making!
– Prasanna
Jan 3 at 14:02
1
1
well… you can also declare your main template and put in there the
<router-view> tag. router.vuejs.org/guide have a look to the example html parts– Federico Quagliotto
Jan 3 at 14:03
well… you can also declare your main template and put in there the
<router-view> tag. router.vuejs.org/guide have a look to the example html parts– Federico Quagliotto
Jan 3 at 14:03
|
show 1 more comment
1 Answer
1
active
oldest
votes
0
I thought so hard about it that I realized that I can not use this inside my components key , but I can use globals like so
export default {
name: 'app',
components: {
NavBar,
ActiveComponent: routes[window.location.pathname.toLowerCase()] || routes.notFound
}
}
answered Jan 3 at 13:55
PrasannaPrasanna
1,528618
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
});
}
});
draft saved
draft discarded
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%2f54023514%2fdefining-component-on-data-or-computed-section-vue%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
0
I thought so hard about it that I realized that I can not use this inside my components key , but I can use globals like so
export default {
name: 'app',
components: {
NavBar,
ActiveComponent: routes[window.location.pathname.toLowerCase()] || routes.notFound
}
}
answered Jan 3 at 13:55
PrasannaPrasanna
1,528618
add a comment |
0
I thought so hard about it that I realized that I can not use this inside my components key , but I can use globals like so
export default {
name: 'app',
components: {
NavBar,
ActiveComponent: routes[window.location.pathname.toLowerCase()] || routes.notFound
}
}
answered Jan 3 at 13:55
PrasannaPrasanna
1,528618
add a comment |
0
0
0
I thought so hard about it that I realized that I can not use this inside my components key , but I can use globals like so
export default {
name: 'app',
components: {
NavBar,
ActiveComponent: routes[window.location.pathname.toLowerCase()] || routes.notFound
}
}
answered Jan 3 at 13:55
PrasannaPrasanna
1,528618
I thought so hard about it that I realized that I can not use this inside my components key , but I can use globals like so
export default {
name: 'app',
components: {
NavBar,
ActiveComponent: routes[window.location.pathname.toLowerCase()] || routes.notFound
}
}
answered Jan 3 at 13:55
PrasannaPrasanna
1,528618
answered Jan 3 at 13:55
PrasannaPrasanna
1,528618
answered Jan 3 at 13:55
PrasannaPrasanna
1,528618
answered Jan 3 at 13:55
PrasannaPrasanna
1,528618
1,528618
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54023514%2fdefining-component-on-data-or-computed-section-vue%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
Are you looking at something like Dynamic Components? vuejs.org/v2/guide/components.html#Dynamic-Components
– Federico Quagliotto
Jan 3 at 13:47
@FedericoQuagliotto I just found a way to do what I was looking for! should I answer my own question here ? what is the flow ?
– Prasanna
Jan 3 at 13:53
have you seen router.vuejs.org vue-router? i think that swap the component on the fly on this way is a bit dangerous.. have a look to the lifecycle of a vue component (vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)
– Federico Quagliotto
Jan 3 at 13:58
@FedericoQuagliotto I looked into the router but I am not able to get my base component (template) to exist everywhere with it! I want NavBar to be present on every page. But with router, I would have to define that NavBar component on every page I am making!
– Prasanna
Jan 3 at 14:02
1
well… you can also declare your main template and put in there the
<router-view>tag. router.vuejs.org/guide have a look to the example html parts– Federico Quagliotto
Jan 3 at 14:03