Добрый день, помогите разобраться с тем как правильно в Vue JS отслеживать изменения свойства props в дочернем компоненте и на основе этого изменения запускать функцию.
В моем случае есть родительский компонент и два дочерних. В родительском компоненте определено свойство userid = false.
В дочернем компоненте users выводится список пользователей, при клике на ссылку “Подробнее” запускается событие pickuser и в родительский компонент передается ID выбранного пользователя, где оно сохраняется в свойство userid.
В компоненте current-user выводится информация о выбранном пользователе, сейчас там выводится только ID текущего выбранного пользователя, этот ID передается в компонент через props [‘userid’] от родителя. В current-user я указываю через watch слежение за свойством props [‘userid’] и каждый раз когда это свойство получает новое значение, я запускаю в блоке watch метод getUserDetaile - этот будет обращаться на внешний API для получения данных по ID текущего пользователя, сейчас там просто выводится log в консоль.
Вопрос как правильно реализовать слежение за изменением свойства props и как правильно добавить к слежению метод, который будет запускаться только при изменении свойства props ? Я делал слежение как через watch так и через updated
метод запускается, но непонятно насколько вообще грамотно я реализовал этот механизм? В каком случае код будет работать быстрее?
Код html документа:
<html>
<head>
<title>Компоненты Vue.js</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<current-user :userid="userid" @useridreset="reset"></current-user>
<users :userid="userid" @pickuser="changeID"></users>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="main.js"></script>
</body>
</html>
Код js файла:
// пользователи
Vue.component('users', {
props: ["userid"],
template: `
<div>
<h3>Список пользователей</h3>
<div class="users">
<div class="user" v-for="(user, index) in users" :key="index">
<p>User id:{{ user.userid }}</p>
<p>Name:{{ user.name }}</p>
<div class="detail-info"><span @click="pickID(user.userid)">Подробнее</span></div>
</div>
</div></div>
`,
methods:{
pickID: function(ID){
// отправляем событие в родительский компонент
this.$emit("pickuser", ID);
}
},
data(){
return {
users:[ // массив пользователей получаем из обращения к API (здесь просто сохранен ввиде массива)
{name:'Sasha', position:'frontend web developer', userid:5},
{name:'Masha', position:'designer', userid:7},
{name:'Lena', position:'accountant', userid:12}
]
}
}
});
// блок где выводится информация о текущем выбранном пользователе
Vue.component('current-user', {
props: ["userid"],
data(){
return{
buttonReset: false
}
},
methods: {
reset(){
this.$emit("useridreset");
this.buttonReset = false;
},
// здесь получаем детальную информацию по пользователю
getUserDetaile(ID){
// здесь будет обращение у удаленному API на сервер
// пока выводим сообщение в консоль
console.log('Получаем данные пользователя по его ID = ' + ID);
}
},
// updated: function(){ // блок кода который запускается при изменении props
// if(this.userid !== false){
// this.buttonReset = true;
// }
// },
watch:{
userid: function(val){
if(val !== false){
this.buttonReset = true;
this.getUserDetaile(this.userid);
}
}
},
template:`
<div>
<h3 v-if="userid">ID выбранного пользователя: {{ userid }}</h3>
<div v-if="buttonReset">
<h3>button: {{ buttonReset }}</h3>
<p><button @click="reset">Reset</button></p>
</div>
</div>`,
});
// главный компонент
new Vue({
el: "#app",
data:{
userid:false
},
methods:{
changeID: function(ID){
this.userid = ID;
},
reset:function(){
this.userid = false;
}
}
});
