[Vue.Js ] Choisir des personnes dans une liste, puis les transférer dans une autre

téléchargé.jpg

Introduction


Choisir des personnes ( Des objets JSON …) dans un tableau d’objet JSON, puis les copier dans un autre tableau d’objets JSON, quand on clique sur un bouton .

On voit là que vue.js structure bien et rends la réalisation d’ un truc de ce genre méga facile, fait en 3 minutes !! Pour l’instant, c’est comme du angularJs, mais en plus structuré !

Tester le code en temps réel


Cliquer ici !

Le code :


La vue HTML :

<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Exo Vue.Js</title>
        
		<!------------------------------------------------------------ CHARGEMENT DES LIBRAIRIES ------------------------------------------------>
        
		<!-- development version, includes helpful console warnings -->
		<script src="js/vue.min.js"></script>
		
		<!------------------------------------------------------- FIN DE CHARGEMENT DES LIBRAIRIES ------------------------------------------------->
	</head>

<!-- La page HTML générale -->
<body >
	<div id="example-1">
		Liste générale
		<ul >
		  <li v-for="p in personnes">
			<button  v-on:click="choisir(p)" >+</button> {{ p.nom }} 
		  </li>
		</ul>
		
		Liste des personnes choisies
		<ul >
		  <li v-for="c in personnesChoisies">
			{{ c.nom }} 
		  </li>
		</ul>
	</div>
</body>

Le code vue.js :

<!-- Vue.Js -->

var example1 = new Vue({
  el: '#example-1',
  data: {
    personnes: [
      { nom: 'Philippe' },
      { nom: 'Jalok' },
	   { nom: 'William' },
	    { nom: 'Kamel' },
    ],
	personnesChoisies:[]
  },
  methods: {
	choisir: function(p){

		// Etape 1 : on supprime la personne choisie de la liste générale
		this.personnes.splice(
		  this.personnes.indexOf(p), 1
		);

		// Etape 2 : On l'ajoute à la liste des personnes choisies
		this.personnesChoisies.push({ nom:p.nom }); // Ajout à la liste des personnes choisies
	}
  }

})

Publicités