I have this component
<div class="card col-4" style="width: 22rem;">
<img class="card-img-top" src="../assets/images/olu.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">{{ stories.articles[0].summary }}</p>
<router-link :to="{path: '/viewArticle', params:{id:123}}"><a class="btn btn-primary">Continue Reading</a></router-link>
</div>
</div>
Notice the router-link tag:
<router-link :to="{path: '/viewArticle', params:{id:123}}"><a class="btn btn-primary">Continue Reading</a></router-link>
It's being routed to display an article.vue component which is shown below:
<template>
<div>
<div class="container row">
<h1 class="display-3 col">Article in view</h1>
</div>
<div class="container">
<img src="../assets/images/olu.jpg"/>
<article>
some text
</article>
</div>
</div>
</template>
<script>
// /console.log(params.id);
export default {
name: 'article',
data() {
return {
}
}
}
</script>
This works absolutely fine. My question is very simple, how do I reference the id value passed into the router-link params property, inside this article.vue component, which is being returned whenever the /viewArticle path is hit, as shown in the 1st component above.
I've tried looking through the documentation and a few articles, but so far I haven't been able to find a suitable solution.
Kind regards
You can set the props property to true on the article route as described in Passing Props to Router Component section.
{
name: 'article'
path: '/viewArticle/:id',
component: ArticleView // whatever you named the component
props: true
}
Then you your ArticleView component you can add an id prop:
<script>
export default {
name: 'article',
props: ['id'],
data() {
return {
}
}
}
</script>
The id is now available to you directly on the component and you can fetch the article.
If you want to you can also preload the article so that the actual article is passed instead of the id.
You do that by adding beforeRouteEnter to the component:
<script>
export default {
name: 'article',
props: ['id'],
data() {
return {
article: null,
}
},
beforeRouteEnter (to, from, next) {
// your ajax stuff goes here
// I use axios in this example
axios.get(`/api/article/${to.params.id}`)
.then((article) => {
next(vm => {
vm.article = article
})
})
.catch(() => {
next('/404')
})
}
}
</script>
So before the router is entered it will fetch the article. This has the added advantage that all your component code can assume that you have the article loaded already. You don't have to deal with the case where it is loaded or not loaded.
In addition you can also access the matched route like this: this.$route and the router for navigation like this: this.$router (with r at the end).
Related
Laravel and Vue are being used. Data is being returned to Vue from Laravel. The Vue prop being send to the Vue child component is a json object array of objects, however, the child component errors when reading it. The error in the console is:
"TypeError: Cannot read property 'id' of undefined". Any help would be greatly appreciated.
This is the raw data returned from Laravel is:
{"channels":[{"id":4,"name":"AI","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":2,"name":"Android Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":3,"name":"iOS Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"},{"id":1,"name":"Web Development","created_at":"2020-04-27T15:18:01.000000Z","updated_at":"2020-04-27T15:18:01.000000Z"}]}
The data being passed as a Vue prop to a child component:
<template>
<div id="component">
<router-link :to="{ name: 'home' }">Home</router-link>
<router-view></router-view>
<br>
<vue-chat :channels="channels"></vue-chat>
</div>
</template>
<script>
export default {
data() {
return {
channels: [],
}
},
methods: {
fetchChannels() {
let endpoint = `/channels`;
axios.get(endpoint).then(resp => {
this.channels = resp.data.channels;
});
},
},
created() {
this.fetchChannels();
}
}
</script>
The child component that errors when attempting to access the Vue prop:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<!-- <div class="card-header">Chat</div> -->
<div class="card-body">
<div class="container">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['channels'],
data() {
return {
activeChannel: this.channels[0].id,
}
},
}
</script>
<style scoped>
#import '/sass/app.scss';
</style>
At first time channels is not available which raises that error, i recommend to define activeChannel as computed property like :
export default {
props: ['channels'],
data() {
return {
}
},
computed:{
activeChannel(){
return this.channels[0]? this.channels[0].id:null,
}
}
Did you check your data channels with Vue Devtools on chrome?
You may try to change below line.
this.channels = resp.data.channels; to this.channels = JSON.parse(resp.data.channels);
In my vue app I have two components one which is a form that posts the form data to my api. And the other gets and displays these posts in a section on the page. My issue is that when I submit a new post the posts lists aren't updated. The data stays the same unless I refresh the page. How can I get my posts list to update when I submit the form?
My Code:
client/src/App.vue
<template>
<div id="app">
<MainHeader :modalVisability="modal" v-on:showModal="toggleModal" />
<div id="content_wrap">
<Summary />
</div>
<OppForm :modalVisability="modal" />
</div>
</template>
<script>
import MainHeader from './components/MainHeader.vue';
import OppForm from './components/oppForm.vue';
import Summary from './components/Summary.vue';
export default {
name: 'App',
components: {
MainHeader,
Summary,
OppForm
},
data () {
return {
modal: false
}
},
methods: {
toggleModal (modalBool) {
this.modal = modalBool;
}
}
}
</script>
client/src/components/oppForm.vue
<template>
<div id="opp_form_modal" >
<form #submit.prevent="SubmitOpp" v-if="modalVisability">
<input type="text" name="company_name" v-model="company_name">
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'oppForm',
props: {
modalVisability: Boolean,
},
data () {
return {
company_name: ''
}
},
methods: {
SubmitOpp () {
axios.post('http://localhost:5000/', {
company_name: this.company_name,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
}
</script>
client/src/components/Summary.vue
<template>
<div id="summary_section">
<h2>Summary</h2>
<div id="summary_board">
<div class="column">
<div class="head">
<h3>Opportunities</h3>
</div>
<div class="body">
<div class="post"
v-for="(post, index) in posts"
:key="index"
>
<p class="company">{{ post.company_name }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return{
posts: []
};
},
created() {
axios.get('http://localhost:5000/')
.then(res => {
// console.log(res);
const data = res.data;
this.posts = data;
})
.catch(error => console.log(error));
}
}
</script>
The problem is that you're actually fetching your posts only on the app creation (i.e. inside the created() method).
You should wrap your axios call inside a function updatePosts() and then call it whenever you add a new post successfully, or you could create a custom event that is triggered whenever a new post is added.
created() is called only once (see vue lifecycle) so you fetch API before submitting form.
Try to add some console.log to understand what is called when.
You could use an global event bus and send form value as event data to summary. I could imagine also a solution where event is used to "tell" summary that form was submitted (just boolean, not data itself). In summary you then call API each time you receive event.
Or simple add an "update" button to summary to manually call API.
See Communication between sibling components in VueJs 2.0
or global vue instance for events for detailed examples.
I'm building a menu app using Vue JS. I was told that only have to use 1 component if the styling stays the same. So that means i have to use dynamic data. each menu/submenu has 3 to 4 menu links. I was looking for a solution to send variables with data to a component and came up with 'props'. But i couldn't find a way to send props from different routes to the same component and check which route you're on to know which props to load into the html.
I already tried to load props into a template, and that works fine. But sending and replacing prop values in the same part of html is something i haven't figured out yet.
{ path: '/list', component: List, props: { url: 'www.google.com' } }
<template>
<div class="container">
<h1>Welkom</h1>
<div class="row">
<div class="col-md-6">
<router-link to='/weed'>Wiet</router-link>
</div>
<div class="col-md-6">
<router-link to='/stuff'>Stuff</router-link>
</div>
<div class="col-md-6">
<router-link to='/joint'>Joint</router-link>
</div>
<div class="col-md-6">
<router-link to='/edibles'>Edibles</router-link>
</div>
</div>
</div>
</template>
the <router-link> should dynamic depending on which route you are, so it can load in different menu items.
I want a menu that loads in different route links depending on which route you are.
I think you should use Programmatic Navigation and query params like
router.push({ path: 'register', query: { plan: 'private' } })
so for your application use
<div class="col-md-6"
#click="$router.push({ path: '/edibles',
query: { url: 'www.google.com', other: 'etc' }})"
>Edibles</div>
you can access these query params in the navigated component using $route.params.url in a template and this.$route.params.url in functions and computed and all other properties of vue component instance.
also check https://router.vuejs.org/guide/essentials/navigation.html for details
Edit as per comment
I think you should still use Programmatic Navigation with
router.push({ name: 'user', params: { userId } })
the params provided can be used as props to the component as shown below
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true }
]
})
just remember to set props: true in routes definition!
You can use params from your route as props in your component and use a watcher to react to route changes. Either have a state system (vuex) with which you can access specific data regarding the params or just plainly use the params.
Use: router.push({ path: '/user/${userId}' })
then
watch: {
$route(to, from) {
// react somehow
}
}
and/or
template: '<div>User {{ $route.params.id }}</div>'
I have a 'views' page that imports two components, one of which is a NavBar that will display a loading animation until the other component is fully loaded in.
The way I'm trying to accomplish this, is I am trying to define a 'loading' var in the view, pass that var into the NavBar AND releases components. IF I change the loading to false from the releases component that should propagate over to the NavBar (to stop the loading animation).
views/Release.vue
<template>
<div>
<NavBar v-bind:loading="this.loading"></NavBar>
<div id="vue-main">
<h1><b>Releases</b></h1>
<Releases v-bind:loading="this.loading"></Releases>
<Footer></Footer>
</div>
</div>
</template>
<script>
import Releases from "../components/Releases.vue";
import NavBar from "./components/NavBar.vue";
export default {
name: "releases",
data () {
return {
loading: 'loading'
}
},
components: {
NavBar,
Releases,
}
};
</script>
components/NavBar.vue
<template>
<div>
<div id="nav">
<a href='/link1'>Link 1</a>
<a href='/link2'>Link 2</a>
<a href='/link3'>Link 3</a>
<pulse-loader :loading="this.loading"></pulse-loader>
</div>
</div>
</template>
<script>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
export default {
name: 'NavBar',
props: ['loading'],
components: {
PulseLoader
},
};
</script>
I have left out Releases.vue from this post for brevity, but no matter where I set
this.loading=false
It does not seem to propagate over to NavBar component.
What am I doing wrong here? Not sure If I need to use $emit for something like this?
No, you should NOT modify the prop loading from Releases.vue.
In Releases.vue when data loaded, call $emit:
this.loadReleases()
.then(() => {
// Your logic.
this.$emit('loaded', true);
});
In the view Release.vue
<template>
<div>
<NavBar :loading="loading"></NavBar>
<div id="vue-main">
<h1><b>Releases</b></h1>
<Releases #loaded="updateLoading"></Releases>
<Footer></Footer>
</div>
</div>
</template>
<script>
import Releases from "../components/Releases.vue";
import NavBar from "./components/NavBar.vue";
export default {
name: "releases",
data () {
return {
loading: true,
}
},
components: {
NavBar,
Releases,
},
methods: {
updateLoading(val) {
this.loading = !val; // loading = false;
},
},
};
</script>
Please, use : instead of v-bind, # instead of v-on for making the code clear. And it's no need to use this on the template.
Do not use this in your templates.
<NavBar v-bind:loading="loading"></NavBar>
<div id="vue-main">
<h1><b>Releases</b></h1>
<Releases v-bind:loading="loading"></Releases>
<Footer></Footer>
<pulse-loader :loading="loading"></pulse-loader>
In fact, eveything in the template refers to this component, and you can't refer to anything else directly from the template.
$emit is for sending data up to the parent, and the main use case for that is to tell the parent to update a property that then flows back down to the component. Your use case is updating children, and using v-bind is appropriate, as the NavBar owns the data.
I'd like to render new component in vue.js as if it's new page.
I'm trying to do it with something called "dynamic component"
parent: Post.vue
child: Detail.vue
so, if one of the posts is clicked, Post is off and Detail is on.
The thing is I have to send clicked post's id to the Detail.
Here's some of my code.
Post.vue
<template>
<div>
<div v-if="loading">
loading...
</div>
<div v-else class="container">
<ul>
<li v-for="(post, index) in filteredPosts" v-bind:key="post.no">
<section class="post__main">
<div #click..?? class="main__title">{{post.title}}</div>
</section>
</li>
</ul>
</div>
</div>
</template>
<script>
created() {
axios.get(this.url, {
params: {
page: this.page,
ord: this.ord,
category: []
}
}).then(res => {
this.posts = res.data.list;
this.loading = false;
this.page++;
});
Detail.vue
<template>
<div>
{{contents}}
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Datail',
data() {
return {
req_no: null,
contents: {}
}
},
created() {
axios.get(url, {
params: {
req_no: this.req_no
}
}).then(res => {
this.contents = this.res.data
});
}
}
</script>
I feel like I can do it with props and v-if.
Can someone help me? Thanks!
Once a post is clicked, pass post id to the click handler. In the click handler, route to detail.vue passing post id as route param.
like below:
<li v-for="(post, index) in filteredPosts" v-bind:key="post.no">
<section class="post__main">
<div #click="onPostClick(post.id)" class="main__title">{{post.title}}</div>
</section>
</li>
And in your click handler:
onPostClick(id: number) {
this.$router.push({
name: 'details',
params: {
id
}
});
}
This will work provided you set up vue router correctly in your app and have a valid route for details.
You can access the post id in details component as follows:
created() {
this.postId = this.$route.params.id;
}
I would take a look at the <component> which takes a prop :to and renders a component, this is good for something like tabs where you are rendering different component from a the same general location on the page without reloading the whole page. See here:
https://v2.vuejs.org/v2/guide/components-dynamic-async.html
This seems to be a very good use case for you, just pass into the component the props you need.