VueJS - Propriété Watch
Dans ce chapitre, nous découvrirons la propriété Watch. En utilisant un exemple, nous verrons que nous pouvons utiliser la propriété Watch dans VueJS.
Exemple
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
Kilometers : <input type = "text" v-model = "kilometers">
Meters : <input type = "text" v-model = "meters">
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
</script>
</body>
</html>
Dans le code ci-dessus, nous avons créé deux zones de texte, une avec kilometers et un autre avec meters. Dans la propriété des données, les kilomètres et les mètres sont initialisés à 0. Il y a un objet de surveillance créé avec deux fonctionskilometers et meters. Dans les deux fonctions, la conversion des kilomètres en mètres et des mètres en kilomètres est effectuée.
Lorsque nous entrons des valeurs dans l'une des texboxes, quel que soit le changement, Watch se charge de mettre à jour les deux zones de texte. Nous n'avons pas à attribuer spécialement d'événements et d'attendre qu'il change et de faire le travail supplémentaire de validation. Watch se charge de mettre à jour les zones de texte avec le calcul effectué dans les fonctions respectives.
Jetons un coup d'œil à la sortie dans le navigateur.
Entrons quelques valeurs dans la zone de texte des kilomètres et voyons-les changer dans la zone de texte des compteurs et vice-versa.
Entrons maintenant dans la zone de texte des mètres et voyons-le changer dans la zone de texte des kilomètres. Il s'agit de l'affichage vu dans le navigateur.