#9 - Vue.js Watchers | Vue 2 Basics, Beginner tutorials

𝐕𝐮𝐞 𝟐 𝐁𝐚𝐬𝐢𝐜𝐬 𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭:

Also, follow us on:

[NightlyNewsChat]

one of the most clear tutorial on watcher ~

[shaifulislam]

Sir, Would you like to make a simple project about vue js. Which project will be covered all topic . please sir.

[samuelnmeje]

great video thank you, but my data property is in an object
form:{
mb:nulll,
gb:null,
},
please how do i target it

[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>