Vue Tutorial 9 - Watchers

Current Lesson: Watchers

Previous lesson - GET Requests

Github:

------------------------

My Courses & Recommendations:

My Socials:

Affiliate & Referral Links:

And make sure you subscribe to my channel!

Tags: #vuedevelopment #vue #vuecoding

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting TechRally!

[NS-eewn]

By far the best playlist regarding vue. Please keep it up!

[Genehackerman]

awesome series dude, thank you so much for this

[Noone-]

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!

[themarathoncontinues]

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);
).then(response => {
this.blog=response.data;
console.log(response.data);
});
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>