I am not sure if I am doing this correctly, this is my router view definition:
{
path: '/page',
name: 'page',
component: Page,
props: true,
meta: { requiresAuth: true}
},
Then I access the view like this:
self.$router.push({ name: 'page', params: {stuff: true }})
This is my page component:
<template>
<div class="page">
{{ stuff }}
</div>
</template>
<script>
export default {
name: 'Page',
data() {
return {
stuff: false
}
},
}
</script>
It looks like stuff property is not being set to true, its always false
Our code will pass stuff as component props, not component's data
<template>
<div class="page">
{{ stuff }}
</div>
</template>
<script>
export default {
name: 'Page',
props: ['stuff']
}
</script>
In document:
When props is set to true, the route.params will be set as the
component props
Related
I need to update the component's prop on every route change but it stays with the last info given.
For example, I fill the form in RouteTwo, with id, name, lastname and phone, and if I change to RouteOne, ComponentOne stays with those four values (including phone) until I start filling the form in RouteOne.
I'm working with vue 2.6.12, vue-router 3.4.9
Here's an example code:
General.vue
<template>
<div>
<div>
<router-view #data-updated="updateFunction"></router-view>
</div>
<div>
<component-one v-bind:component-prop="reactiveProp" />
</div>
</div>
</template>
<script>
import ComponentOne from './ComponentOne.vue';
export default {
components: {
ComponentOne,
},
data: () => ({
reactiveProp
}),
methods: {
updateFunction(value) {
this.reactiveProp = value;
},
}
}
</script>
ComponentOne.vue
<template>
<div>
<p>{{ componentProp.id }}</p>
<p>{{ componentProp.name }}</p>
<p>{{ componentProp.lastname }}</p>
<p v-if="routePath == 'routetwo'">{{ componentProp.phone }}</p>
</div>
</template>
<script>
export default {
props: {
componentProp: Object,
},
data: () => ({
routePath: ''
}),
mounted() {
this.routePath = this.$route.path.split('/').at(-1);
},
}
</script>
RouteOne.vue
<template>
<div>
<input type="text" v-model="dataObject.id" />
<input type="text" v-model="dataObject.name" />
<input type="text" v-model="dataObject.lastname" />
</div>
</template>
<script>
export default {
data: () => ({
dataObject: {
id: '',
name: '',
lastname: '',
},
}),
methods: {
// some logic methods
},
watch: {
dataObject: {
handler: function() {
this.$emit('data-updated',this.dataObject);
},
deep: true,
}
},
}
</scipt>
RouteTwo.vue
<template>
<div>
<input type="text" v-model="dataObject.id" />
<input type="text" v-model="dataObject.name" />
<input type="text" v-model="dataObject.lastname" />
<input type="text" v-model="dataObject.phone" />
</div>
</template>
<script>
export default {
data: () => ({
dataObject: {
id: '',
name: '',
lastname: '',
phone: '',
},
}),
methods: {
// some logic methods
},
watch: {
dataObject: {
handler: function() {
this.$emit('data-updated',this.dataObject);
},
deep: true,
}
},
}
</scipt>
Router
{
name: 'general',
path: '/general',
component: () => import('General.vue'),
children: [
{
name: 'route-one',
path: 'routeone',
component: () => import('RouteOne.vue')
},
{
name: 'route-two',
path: 'routetwo',
component: () => import('RouteTwo.vue')
}
]
}
Switching routes doesn't cause a change in dataObject, so no emit will fire. Technically, switching routes causes one route component to be unmounted (destroyed), and the next route component to be created, meaning dataObject is created/recreated every time you switch back and forth, which is fundamentally different from dataObject being "changed" (which activates the watcher).
Instead, put a watcher on the route itself in the General component and reset reactiveProp when that watcher activates. This will clear the fields when going between RouteOne and RouteTwo:
watch: {
$route(to, from) {
this.reactiveProp = {};
},
},
I am new to Vuejs, I am looking to make my code effective just by having one vue component, and i want to specify the routing only once.
Currently i have one info.vue in a apps directive and prises.vue & priseshigh.vue in more directive. I want to have just one component in more directive. But the problem is in info.vue i have used two buttons, each button routes to prises.vue & priseshigh.vue respectively. Just like below code:
<vs-button class="btn" #click="$router.push({name: 'prises'}).catch(err => {})" >Go To</vs-button>
<vs-button class="btn" #click="$router.push({name: 'priseshigh'}).catch(err => {})" >Go There</vs-button>
My first question: So now i want to know, if i make one component as prisescomplete.vue by combining prises.vue & priseshigh.vue, how do i specify the routing to the buttons respectively in info.vue And what should i use in the prisescomplete.vue component to route the prises.vue & priseshigh.vue contents respectively .
My second question: below is my routing.js, so now what changes should i make in routing if i just have one component in views directive, and also with respect to first question.
{
path: '/apps/info',
name: 'info',
component: () => import('./views/apps/info/Info.vue'),
meta: {
rule: 'editor',
no_scroll: true
}
},
{
path: '/apps/info/info-more/prises-card',
name: 'prises',
component: () => import('./views/apps/info/more/prises.vue'),
meta: {
pageTitle: 'info-more',
rule: 'editor',
no_scroll: true
}
},
{
path: '/apps/info/info-more/priseshigh-card',
name: 'priseshigh',
component: () => import('./views/apps/info/more/priseshigh.vue'),
meta: {
pageTitle: 'info-more',
rule: 'editor',
no_scroll: true
}
},
Please send me the modified code, so that i can understand it easily.
You could pass props to route components.
https://router.vuejs.org/guide/essentials/passing-props.html
{
path: '/apps/info/info-more/prises-card',
name: 'prises',
component: () => import('./views/apps/info/more/prisescomplete.vue'),
props: {
prisesType: "prises"
},
meta: {
rule: 'editor'
}
},
{
path: '/apps/info/info-more/priseshigh-card',
name: 'priseshigh',
component: () => import('./views/apps/info/more/prisescomplete.vue'),
props: {
prisesType: "priseshigh"
},
meta: {
rule: 'editor'
}
}
PrisesComplete.vue
<template>
<div>
<span v-if="prisesType === 'prises'"> Prises </span>
<span v-else-if="prisesType === 'priseshigh'"> Prises High </span>
</div>
</template>
<script>
export default {
name: "PrisesComplete",
props: {
prisesType: {
type: String,
required: true
}
}
}
</script>
Also, you could use to="/path"
https://router.vuejs.org/guide/essentials/named-routes.html
<vs-button class="btn" :to="{ name: 'prises' }"> Go To </vs-button>
<vs-button class="btn" :to="{ name: 'priseshigh' }"> Go There </vs-button>
First of all you need to write a navigation.vue component for the navigation and render inside app with routerview. Look the codesandbox and the describtion
TheNavigation.vue
<template>
<div>
<vs-button
class="btn"
#click="$router.push({ name: 'prises' }).catch((err) => {})"
>Prises</vs-button
>
<vs-button
class="btn"
#click="$router.push({ name: 'priseshigh' }).catch((err) => {})"
>Priseshigh</vs-button
>
</div>
</template>
then render the navigation bar with the router view for loading the router.Here is the
App.vue where you render the navigation and routerview.
<template>
<div id="app">
<TheNavigation/>
<hr>
<RouterView/>
</div>
</template>
<script>
import TheNavigation from "./components/TheNavigation";
export default {
name: "App",
components: {
TheNavigation
}
};
</script>
RouterView is reponsible for loading the components which are defined inside router.js
Here is the Router.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = new Router({
mode: "history",
routes: [
{
path: "/prises-card",
name: "prises",
component: () => import("./components/Prises.vue"),
meta: {
pageTitle: "info-more",
rule: "editor",
no_scroll: true
}
},
{
path: "/priseshigh-card",
name: "priseshigh",
component: () => import("./components/PrisesHigh.vue"),
meta: {
pageTitle: "info-more",
rule: "editor",
no_scroll: true
}
}
]
});
export default router;
I have a problem to read the passed data via props in Vue.js from parent to child. I have a list of components
components: [
{
name: "Cart Overview",
component: "CartOverview",
props: this.shopperCart
},
{
name: "Bank Account Overview",
component: "BankAccountOverview",
props: {}
},
{ name: "Verification", component: "Verification", props: {} },
{
name: "Completion Message",
component: "CompletionMessage",
props: {}
}
]
The variable "shopperCart" is set by a request from a backend.
Template of the parent component
<div class="modal-body">
<component
:is="checkoutComponents[currentStep].component"
v-bind="checkoutComponents[currentStep].props"
></component>
</div>
The user can navigate through the components with a next step button who sets the variable currentStep.
Example of one child component
<template>
<div>
<h1>Cart Oerview</h1>
{{ shopperCart }}
</div>
</template>
<script>
export default {
name: "CartOverview",
props: {
shopperCart: { type: Object, default: () => {} }
},
mounted() {
console.log("shopperCart", this.shopperCart);
}
};
</script>
The components lie on a modal. The log output only shows up displaying undefined when I refresh the page, where I can open the modal.
Can someone please help me?
Best regards,
A. Mehlen
I found myself a solution. I changed in the parent component the v-bind with :data
<div class="modal-body">
<component
:is="checkoutComponents[currentStep].component"
:data="checkoutComponents[currentStep].props"
></component>
</div>
and in the child component the name of the prop
<template>
<div>
<h1>Cart Oerview</h1>
{{ data }}
</div>
</template>
<script>
export default {
name: "CartOverview",
props: {
data: { type: Object, default: () => {} }
},
mounted() {
console.log("shopperCart", this.data);
}
};
</script>
Now it works :-)
I would like to pass data to a child component and render that same data in the parent components. Also I would like to use the data in a function and not simply render it in the child. When I pass the props in this example it no longer renders the tags with the data
<template>
<div class="hello">
<div v-for="(section, index) in sections" :key="index">
<p>{{section.name}}</p>
<p>{{section.type}}</p>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
sections: [
{
name: "scoop",
type: "boulder"
},
{
name: "pew pew",
type: "roped"
}
]
};
},
props: ["sections"]
};
</script>
You can't use the same word/property name (sections in your case) for data and props.
I assume your code is the parent component:
// parent.vue
<template>
<div class="hello">
<div v-for="(section, index) in sections" :key="index">
<p>{{section.name}}</p>
<p>{{section.type}}</p>
</div>
<my-child-component :sections="sections" />
</div>
</template>
<script>
import MyChildComponent from '~/components/MyChildComponent.vue'
export default {
name: "HelloWorld",
components: {
MyChildComponent
},
data() {
return {
sections: [
{
name: "scoop",
type: "boulder"
},
{
name: "pew pew",
type: "roped"
}
]
}
},
methods: {
consoleSections() {
console.log(this.sections) // the way to use data in function
}
}
}
</script>
// MyChildComponent.vue
<template>
<div class="hello">
<div v-for="(section, index) in sections" :key="index">
<p>{{section.name}}</p>
<p>{{section.type}}</p>
</div>
</div>
</template>
<script>
export default {
name: "ChildHelloWorld",
props: ['sections'],
methods: {
consoleSections() {
console.log(this.sections) // the way to use data in child
}
}
}
</script>
Take a look in the vue guide about component: https://v2.vuejs.org/v2/guide/components.html
I'm using Vue CLI 3 and it makes a few routes. One is Home.vue. In my program I am trying to programmaticaly go to different pages. I added the routes I need in router.js but kept the already created routes for Home.vue and About.vue. It works fine until I get to 'Home' and get a warning: [vue-router] Route with name 'Home' does not exist.'
Here is the code:
<template>
<div class='secondItem'>
<h4 v-for="item in menuItems"
#click="bindMe(item)" v-bind:class="{'active':(item === current)}">{{item}}</h4>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
current: '',
menuItems: ['Home', 'About', 'Portfolio', 'Contact'],
}
},
methods: {
bindMe(item) {
this.current = item;
this.$router.push({
path: item
})
}
}
}
<script>
Are you using named routes? In that case you need to use name instead of path:
this.$router.push({
name: item
})
Also, your example can be simplified quite a lot. Try this:
<template>
<div class="secondItem">
<router-link :to="{ name: item }" tag="h4" active-class="active" v-for="item in menuItems" v-bind:key="item">{{item}}</router-link>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
menuItems: ['Home', 'About', 'Portfolio', 'Contact']
}
}
}
<script>