VueJS - Interface réactive
VueJS fournit des options pour ajouter de la réactivité aux propriétés, qui sont ajoutées dynamiquement. Considérez que nous avons déjà créé une instance de vue et que nous devons ajouter la propriété watch. Cela peut être fait comme suit -
Exemple
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 20;
},2000
);
</script>
</body>
</html>
Il existe un compteur de propriétés défini comme 1 dans l'objet de données. Le compteur est incrémenté lorsque nous cliquons sur le bouton.
L'instance Vue est déjà créée. Pour y ajouter une montre, nous devons le faire comme suit -
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
Nous devons utiliser $ watch pour ajouter watch en dehors de l'instance vue. Une alerte est ajoutée, qui montre le changement de valeur pour la propriété de compteur. Une fonction de minuterie est également ajoutée, à savoir setTimeout, qui définit la valeur du compteur sur 20.
setTimeout(
function(){
vm.counter = 20;
},2000
);
Chaque fois que le compteur est modifié, l'alerte de la méthode de la montre est déclenchée comme indiqué dans la capture d'écran suivante.
VueJS ne peut pas détecter l'ajout et la suppression de propriété. Le meilleur moyen est de toujours déclarer les propriétés, qui doivent être réactives dès le départ dans l'instance Vue. Au cas où nous aurions besoin d'ajouter des propriétés au moment de l'exécution, nous pouvons utiliser les méthodes Vue global, Vue.set et Vue.delete.
Vue.set
Cette méthode permet de définir une propriété sur un objet. Il est utilisé pour contourner la limitation selon laquelle Vue ne peut pas détecter les ajouts de propriétés.
Syntaxe
Vue.set( target, key, value )
Où,
target: peut être un objet ou un tableau
key: peut être une chaîne ou un nombre
value: peut être n'importe quel type
Jetons un œil à un exemple.
Exemple
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
Dans l'exemple ci-dessus, il existe une variable myproduct créée au départ à l'aide du morceau de code suivant.
var myproduct = {"id":1, name:"book", "price":"20.00"};
Il est donné à l'objet de données dans l'instance Vue comme suit -
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Considérez, nous voulons ajouter une autre propriété au tableau myproduct, après la création de l'instance Vue. Cela peut être fait comme suit -
vm.products.qty = "1";
Voyons la sortie dans la console.
Comme vu ci-dessus, dans les produits, la quantité est ajoutée. Les méthodes get / set, qui ajoutent essentiellement de la réactivité, sont disponibles pour l'id, le nom et le prix, et non pour la quantité.
Nous ne pouvons pas atteindre la réactivité en ajoutant simplement un objet vue. VueJS souhaite principalement que toutes ses propriétés soient créées au début. Cependant, au cas où nous aurions besoin de l'ajouter plus tard, nous pouvons utiliser Vue.set. Pour cela, nous devons le définir en utilisant vue global, c'est-à-dire Vue.set.
Exemple
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
Nous avons utilisé Vue.set pour ajouter la quantité au tableau en utilisant le morceau de code suivant.
Vue.set(myproduct, 'qty', 1);
Nous avons consolidé l'objet vue et voici la sortie.
Maintenant, nous pouvons voir le get / set pour la quantité ajoutée à l'aide de Vue.set.
Vue.delete
Cette fonction permet de supprimer dynamiquement la propriété.
Exemple
Vue.delete( target, key )
Où,
target: peut être un objet ou un tableau
key: peut être une chaîne ou un nombre
Pour supprimer n'importe quelle propriété, nous pouvons utiliser Vue.delete comme dans le code suivant.
Exemple
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
Dans l'exemple ci-dessus, nous avons utilisé Vue.delete pour supprimer le prix du tableau en utilisant le morceau de code suivant.
Vue.delete(myproduct, 'price');
Voici la sortie, que nous voyons dans la console.
Après la suppression, nous ne pouvons voir que l'identifiant et le nom car le prix est supprimé. Nous pouvons également remarquer que les méthodes get / set sont supprimées.