Discussion :

[kevin254kl]

Bonjour,

Pourriez vous m'aider s'il vous plaît?
Je voudrais avec le composant multiselect https://vue-multiselect.js.org/ définir la valeur. Le problème c'est que j'ai un formulaire de mise à jour qui fait aussi ajout, je récupère des données notamment sur des role id et nom, je voudrais du coup remplir automatiquement le multiselect.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<multiselect v-model="user.selectedRole" :options="roles" :multiple="false" open-direction="bottom"
    placeholder="Roles" selectLabel="Selectionner"
    track-by="id" label="name"
    class="filter">
 </multiselect>

Les data initiales

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
data () {
    return {
      user: {
        first_name: '',
        last_name: '',
        email: '',
        selectedRole: []
      },
      roles: []
 
    }
  }

ma fonction appelé dans created

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
,    initParams () {
      if (this.$route.query.updateUser === true)
      {
        let data = JSON.parse(localStorage.getItem('dataToUpdateByAdmin'))
        this.user.first_name = data[0].firstName
        this.user.last_name = data[1].lastName
        this.user.email = data[2].email
        //cette partie ne fonctionne pas car je ne sais pas quel champ mettre à jour
        this.user.selectedRole['role'] = data[3].role
        this.user.selectedRole['id'] = data[4].id
      }
    }

Merci de votre aide

[gwyohm]

Salut,

Pas grand chose à changer:

1. Dans data, selectedRole est déclaré en tableau mais visiblement, tu l'utilises en objet, donc
   

   Code :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
    
   data () {
       return {
         user: {
           first_name: '',
           last_name: '',
           email: '',
           selectedRole: {}, // changement ici
         },
         roles: []
    
       }
     }

2. dans initParams, Vue ne détecte pas les ajouts de propriétés sur un objet. Pour ca, il faut utiliser Vue.set ou son équivalent dans une instance de composant $set
   

   Code :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   4
   5
   6
    
   initParams () {
     // ...
     this.$set(this.user.selectedRole, 'role', data[3].role);
     this.$set(this.user.selectedRole, 'id', data[4].id);
     // ...

[kevin254kl]

Merci ça marche.