[Vue.js] Controler les champs d’un formulaire avec vue.js, puis les colorer si erreur avec bootstrap-vue.js

téléchargé.jpg

Introduction


Exemple de controle de champs avec vue.js, puis coloration des champs en erreur, avec bootstrap vue .

Etape un : Un formulaire pour app one page (pas de submit )


Tester le code ici .


<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 ------------------------------------------------>
        
		<script src="js/vue.min.js"></script>
		
		<!------------------------------------------------------- FIN DE CHARGEMENT DES LIBRAIRIES ------------------------------------------------->
	</head>

<!-- La page HTML générale -->
<body >
	<form id="app" >
  
  <p v-if="errors.length">
    <b>Corrigez les erreurs suivantes:</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>
  {{success}}
  <p>
    <label for="name">Nom<label>
    <input type="text" v-model="nom" >
  </p>

  <p>
    <label for="age">Age<label>
    <input type="number" v-model="age" min="0">
  </p>

  <p>
    <label for="film">Film favori<label>
    <select  v-model="film">
      <option>Star Wars</option>
      <option>Vanilla Sky</option>
      <option>Atomic Blonde</option>
    </select>
  </p>

  <p  >
    <button type="button" v-on:click="checkForm()" style="float: right;">   ok </button>
  </p>

</form>
</body>

Le code vue.js :

const app = new Vue({
  el:'#app',
  data:{
    errors:[],
    nom:null,
    age:null,
    film:null,
	success:null
  },
  methods:{
    checkForm:function(e) {

     this.errors = [];
      if(!this.nom){
		this.errors.push("le nom est requis.");
		return false;
      };
      if(!this.age ){
		this.errors.push("L'age est requis.") ;
		return false;
	  };
	  if(this.age < 18){
		this.errors.push("L'age est trop bas.") ;
		return false;
	  };

	  this.success = ' Vous avez correctement rempli le formulaire ';
    }
  }
})

Les CSS :

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=number], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

Etape 2 : On veut colorer les champs ou la personne s’est trompé ..

Tester le code ici.

Il faut alors utiliser bootstrap vue :

 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link type="text/css" rel="stylesheet" href="bootstrapvue/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="bootstrapvue/bootstrap-vue.css" />
	<script src="bootstrapvue/vue.js"></script>
	<script src="bootstrapvue/polyfill.min.js"></script>
	<script src="bootstrapvue/bootstrap-vue.js"></script>
</head>

<body>
	<div id="app">
		<div class="card " style="width: 18rem;">
			<b-form @submit="onSubmit" @reset="onReset" v-if="show">
				<b-form-group id="exampleInputGroup1" label="Email address:" label-for="exampleInput1" description="We'll never share your email with anyone else.">
					<b-form-input id="exampleInput1" type="email" v-model="form.email" required placeholder="Enter email"> </b-form-input>
				</b-form-group>
				<b-form-group id="exampleInputGroup2" label="Your Name:" label-for="exampleInput2">
					<b-form-input id="exampleInput2" type="text" v-model="form.name" required placeholder="Enter name"> </b-form-input>
				</b-form-group>
				<b-form-group id="exampleInputGroup3" label="Food:" label-for="exampleInput3">
					<b-form-select id="exampleInput3" :options="foods" required v-model="form.food"> </b-form-select>
				</b-form-group>
				<b-form-group id="exampleGroup4">
					<b-form-checkbox-group v-model="form.checked" id="exampleChecks">
						<b-form-checkbox value="me">Check me out</b-form-checkbox>
						<b-form-checkbox value="that">Check that out</b-form-checkbox>
					</b-form-checkbox-group>
				</b-form-group>
				<b-button type="submit" variant="primary">Submit</b-button>
				<b-button type="reset" variant="danger">Reset</b-button>
			</b-form>
		</div>
	</div>
</body>

Le code vue :

var app = new Vue({
		el: '#app',
		data() {
			return {
				form: {
					email: '',
					name: '',
					food: null,
					checked: []
				},
				foods: [{
					text: 'Select One',
					value: null
				}, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
				show: true
			}
		},
		methods: {
			onSubmit(evt) {
				evt.preventDefault();
				alert(JSON.stringify(this.form));
			},
			onReset(evt) {
				evt.preventDefault();
				/* Reset our form values */
				this.form.email = '';
				this.form.name = '';
				this.form.food = null;
				this.form.checked = [];
				/* Trick to reset/clear native browser form validation state */
				this.show = false;
				this.$nextTick(() => {
					this.show = true
				});
			}
		}
	})

Les CSS :

	.card {
		margin: 0 auto;
		/* Added */
		float: none;
		/* Added */
		margin-bottom: 10px;
		/* Added */
		margin-top: 5%;
	}
Publicités

#45a049, #4caf50, #ccc, #f2f2f2

[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
	}
  }

})

Solveur Javascript pour recherche opérationelle.

Introduction


Une lib pour solver avec js : https://www.npmjs.com/package/javascript-lp-solver

But :

Développer une app utilisant cette api.
Traiter les pbs de

  • Transport
  • Mélanges
  • Horaires

avec Dual etc …