Boucles - vue.js

Boucles

Boucle simple

Utilisation simple d’une boucle dans vue.js

HTML

<login-form />

Script

//à mettre après la création de l'app (let app = Vue.createApp({...})
   app.component('login-form', {
  template:`
  <form @submit.prevent="handleSubmit">
     <p v-for="(str, i) in inputs" :key="str"> </p>
    <!-- key est une propriété obligatoire d'une loop qui doit être unique par boucle, l'explication arrivera plus tard -->
    <!-- pour chaque str dans inputs afficher la valeur de str soit -> email,password,name -->
    <!-- i est l'index de chaque élément de ma boucle -> soit 0 pour email, 1 pour password, 2 pour name -->
  </form>
  `,
  components: ['custom-input'],
  data() {
    return {
      title: 'Login form',
      inputs: [
        'email',
        'password',
        'name'
      ] //tableau des inputs dans lequel str va boucler
    }
  }

Boucle - un nouveau type d’input

Utilisation d’une boucle dans mes inputs pour ne plus utiliser qu’un seul custom-input qui boucle sur l’objet inputs

HTML

<login-form />

Script

//à mettre après la création de l'app (let app = Vue.createApp({...})
app.component('login-form', {
  template:`
  <form @submit.prevent="handleSubmit">
    <h1>Boucles - vue.js</h1>
    <custom-input
      v-for="(input, i) in inputs"
      :key="i"
      v-model="input.value"
      :label="input.label"
      :type="input.type"
    />
    <!-- pour chaque input dans mon objet inputs -->
    <!-- l'index est ma clef -->
    <!-- v-model prend la valeur d'input.value qui correspond à "valeur d'email", "valeur de password" -->
    <!-- label change aussi en fonction de la boucle soit à Email, Password -->
    <!-- maintenant nous pouvons aussi modifier le type pour chaque input grâçe à notre boucle -->
    <!-- le type prendra alors la valeur soit email, password -->
    <button>Log in</button>
  </form>
  `,
  components: ['custom-input'],
  data() {
    return {
      title: 'Login form',
      inputs: [ //mon tableau d'objets inputs
        {
          label: 'Email', //input.label dans ma boucle
          value: '', //input.value dans ma boucle
          type: 'email' //input.type dans ma boucle
        },
        {
          label: 'Password',
          value: '',
          type: 'password'
        }
      ],
      email: '',
      password: '',
      emailLabel: 'Email',
      passwordLabel: 'Password'
    }
  },
  methods: {
    handleSubmit(){
        console.log(this.inputs[0].value, this.inputs[1].value)
        //affiche la valeur d'inputs à l'index 0 et à l'index 1
        //soit email et password
    }
  }
})
app.component('custom-input', {
    template: `
      <label>
        
        <input :type="type" v-model="inputValue">
        //on utilise donc la valeur "type" donné par le parent via la fonction :
      </label>
    `,
    props: ['label', 'type', 'modelValue'],
    //vu qu'on utilise le type extérieur on intègre la propriété du parent 'type' grâce au v-bind
    computed: {
      inputValue: {
        get(){
          return this.modelValue
        },
        set(value){
          this.$emit('update:modelValue', value)
        }
      }
    }
})