Composant MultiSelect updater la valeur lors du chargement de la page

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:

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:

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:

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

Salut,

Pas grand chose à changer:
Dans data, selectedRole est déclaré en tableau mais visiblement, tu l'utilises en objet, donc
Code:

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

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); // ...

Merci ça marche.