liste vue.js dans un tableau

Vue.js est un framework JavaScript frontal très populaire. Il offre aux développeurs un moyen simple de créer des applications complexes d’une seule page. Dans Vue.js, les tableaux sont généralement utilisés pour représenter des listes, des tables de données et d'autres structures de données qui nécessitent l'ajout ou la suppression dynamique d'éléments.

Cependant, nous devons parfois convertir une liste Vue.js en un tableau JavaScript normal. Cela peut être fait en utilisant les fonctions intégrées de Vue.js.

Vue.js fournit une fonction appelée "Vue.set()" pour modifier la valeur dans l'objet de données Vue.js. Cette fonction accepte trois paramètres : objet, index et nouvelle valeur. L'utilisation de Vue.set() garantit que la vue est restituée lorsque l'objet est modifié, Vue.js détectera ces modifications et mettra à jour la vue.

Supposons que nous ayons une liste Vue.js contenant les données suivantes :

data : {
list : [

{name: 'John', age: 25},
{name: 'Mary', age: 30},
{name: 'Bob', age: 35},

]
}

À ce stade, nous souhaitons convertir chaque objet de la liste en tableau. Cela peut être fait en utilisant la méthode vm.$set() de Vue.js. La méthode vm.$set() nous permet d'ajouter des propriétés dynamiques à l'instance Vue.

Dans l'instance Vue, nous pouvons définir un nouveau tableau vide pour stocker l'objet liste converti. Nous pouvons ensuite utiliser Vue.set() pour placer chaque objet de liste dans ce tableau vide.

Voici un exemple :

data : {
list : [

{name: 'John', age: 25},
{name: 'Mary', age: 30},
{name: 'Bob', age: 35},

],
arr : []
},
created() {
this.list.forEach((item, index) => {

this.$set(this.arr, index, item);

})
}

Dans cet exemple, nous utilisons la méthode forEach() dans Vue.js pour parcourir tous les éléments de la liste. Pour chaque élément, créez une nouvelle position dans le tableau vide et pointez-la vers l'élément. Utilisez également la méthode vm.$set() pour vous assurer que ce nouvel emplacement est ajouté à l'instance Vue.js.

Maintenant, nous avons réussi à convertir la liste Vue.js en un tableau JavaScript. Nous pouvons utiliser ce tableau dans le modèle pour stocker des données au lieu d'utiliser la liste de Vue.js.

Résumé :

Dans Vue.js, utilisez la méthode Vue.set() pour convertir une liste en tableau. Cela garantit que la vue est restituée et doit être utilisée dans les situations où une application Vue.js doit ajouter ou supprimer dynamiquement des éléments. En utilisant la méthode Vue.set(), vous pouvez utiliser un tableau JavaScript normal pour stocker des données au lieu d'avoir à utiliser la liste de Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!