@Genehackerman
awesome series dude, thank you so much for this
@Noone-1980
Bro. Your videos are great! Please keep making more tutorials. Are you going to make tutorials on Laravel + Vuejs? Hoping you will. Thanks again for the videos!
@gautamgadhiya3932
please continue this playlist sir...
@joaomatos1144
2021: excellent explanation =)
@mamooglo1794
Great video ,, thanks for this
@gbengaol
Amazing lesson
@themarathoncontinues8233
Can you please help me out
What I am trying to do is read links on my page,
the links contain userId, I want to use the userId to get other related post from the same userId,
The problem is to read the new route with watch so it can update the page
I managed to get the Values with object.values() function.
it displays the following log:
New value: /index/3?uid=1,,[object Object],viewArticle,/index/3,[object Object],[object Object],[object Object],,/index/3?uid=1
I am stuck with trying to change page dynamicly with wacth
<template>
<div id="single-blog">
<h1>{{ blog.title }}</h1>
<article>{{ blog.body }}</article>
<br />
<!-- <div>{{ related[0] }}</div> -->
<user-item
></user-item>
<div v-for="item in related.slice(0, 3)" v-bind:key="item.id">
<!-- <router-link v-bind:to="'/index/' + helloItem.id"><td>{{ helloItem.title }} </td></router-link> -->
<router-link v-bind:to="{
name:'viewArticle',
params: { id: item.id },
query: { uid: item.userId }
}"
>
<div>title: {{ item.title }} </div>
<br />
<div>text: {{ item.body }} </div>
</router-link>
<hr />
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
components: {
UserItem
},
created() {
console.log(this.id);
axios.get('https://jsonplaceholder.typicode.com/posts/' + this.id
).then(response => {
this.blog=response.data;
console.log(response.data);
});
axios.get('https://jsonplaceholder.typicode.com/posts/', {
params: { userId: this.uid} }
).then(res => {
//const uidArt = JSON.stringify(res.data) ;
const uidArt = res.data;
this.related = res.data;
//this.related = uidArt;
//var artikel = uidArt[0];
console.log('artikel 1 id: ' + uidArt[0].title)
console.log('artikel 2 id: ' + uidArt[1].id)
console.log('artikel 3 id: ' + uidArt[2].id)
console.log('uid log: ' + JSON.stringify(uidArt) );
});
console.log('uid:' + this.$route.query.uid);
},
data() {
return {
id: this.$route.params.id,
uid: this.$route.query.uid,
blog: [],
related: []
}
},
watch: {
$route(newVal, oldVal) {
console.log(`New value: ${ Object.values(newVal)} `);
console.log(`Old value: ${ Object.values(oldVal)} `);
}
}
</script>
<style>
#single-blog{
max-width: 960px;
margin: 0 auto;
}
</style>
@NS-ee2wn