[Bonnes pratiques] Imbrication de composants et boucle

Bonjour à toutes et à tous,

Je suis en train d’apprendre vue.js autant vous dire que mon niveau est proche du néant :flushed:. Pour commencer je compte réaliser un composant me permettant d’afficher des employés étant affectés à des services. Il me faut du concret pour comprendre les choses.

¤ Mon problème :

J’ai une première boucle qui m’affiche chaque service mais pour chaque itération de service je souhaite boucler sur mes utilisateurs pour les affecter dans le bon service. C’est cette deuxième partie qui me pose problème.

Est-ce que je suis parti correctement ? Est-ce que vous connaissez un article/tuto qui traite justement de mon cas ?

Je remercie par avance les personnes qui prendront le temps de me lire et voir me répondre. Je vais également tenter une mise page le plus lisible possible.

¤ Ce que j’ai pour le moment :

Au niveau des données, rien de complexe

  • une liste de services (id, name) ;
  • une liste d’utilisateurs ayant un (id, name, seviceId) ;

En JS

C’est une code de test, par la suite j’aurai des appels ajax tous beaux tous propres :stuck_out_tongue_winking_eye:

var AppServices = {
    template: '<div class="services"><div class="service" v-for="service in services()"><h4>{{service.name}}</h4></div></div>',
    methods: {
        services:function () {
            let _services =newArray();
            _services.push({ id: 1, name: "Service 1" });
            _services.push({ id: 2, name: "Service 2" });
            _services.push({ id: 3, name: "Service 3" });
            return _services;
        }
    }
}

var AppUsers = {
    template: '<div class="users"><div class="user" v-for="user in users(service.id)">{{user.name}}</div></div>',
    methods: {
        users:function (serviceId) {
            let _users =newArray();
            _users.push({ id: 1, name: "User 1", service: 1"});
            _users.push({ id: 2, name: "User 2", service: 3 });
            _users.push({ id: 3, name: "User 3", service: 1 });
            if (serviceId !==undefined) {
                _users = _users.filter(function (element) {
                    return element.service === serviceId;
                });
            }
            return _users;
        }
    }
}

var tableau = new Vue({
    el: '#tableau',
    components: {
        'app-services': AppServices,
        'app-users': AppUsers
    }
})

En HTML

<div id="tableau">
    <app-services></app-services>
</div>


Bonne continuation à toutes et à tous.

Jean Luc

Salut,

il faut éviter de baser le template/l’HTML sur des methods (qui sont plutôt réservées à gérer les event)

Il faut plutôt utiliser data et computed pour driver l’HTML.
Dès qu’il y aura des changements dans data, les computedet l’HTML sera mis à jour

AppServices = {
  data: () => ({
    services: [],
  }),
  mounted () {
    this.fetchServices()
  },
  methods: {
    fetchServices () {
      // ... business logic / backend calls
      this.services = [...]
    }
}
AppUsers = {
  data: () => ({
    users: [],
    displayedServiceId: null,
  }),
  computed: {
     displayedUsers () {
       if (!this.displayedServiceId) { return [] }
       return this.users.filter(u => (u.serviceId === this.displayedServiceId))
     }
  },
  mounted () {
    this.fetchUsers()
  },
  methods: {
    fetchUsers () {
      // ... business logic / backend calls
      this.users = [...]
    }
}

et v-for="user in displayedUsers"

Merci Matxx pour ta réponse je vais bosser la dessus.
Bonne continuation à toutes et tous