Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Vuej.s] Problème affichage détails contact

Sujet résolu
    14 juin 2019 à 10:18:31

    Bonjour,

    J'ai un problème quand je veut afficher le détails d'un contact. Donc il y a le bouton " Voir les détails " mais quand je clique, aucune action :o

    Mais en faite depuis que j'ai voulu utiliser Vuex , sa bug, quand il n'y a pas Vuex il n'y a aucun problème tout marche comme il faut.

    Il y a le " nom : " " prénom : " présent, mais aucune informations qui suivent :

    Sa reste comme sa même en cliquant sur les boutons détails :x 

    Voici mes codes :

    App.Vue : 

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <ContactPage prenom='Enzo' nom='Spinazzola' />
      </div>
    </template>
    
    <script>
    import ContactPage from './pages/contactpage.vue'
    
    export default {
      name: 'App',
      components: {
        ContactPage
      }
    }
    </script>
    
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

    ContactPage.Vue :

    <template>
      <div class="page">
          <div class="content">
            <ContactList v-on:selected='setSelected($event)' />
            <ContactDetails :contact='selectedContact' />
          </div>
      </div>
    </template>
    
    <script>
    import ContactList from '../components/ContactList.vue'
    import ContactDetails from '../components/ContactDetails.vue'
    
    export default {
      data () {
        return {
          selectedContact: {}
        }
      },
      components: {ContactList, ContactDetails},
      methods: {
        setSelected (_selectedContact) {
          this.selectedContact = _selectedContact
        }
      }
    }
    </script>
    
    

    ContactList.Vue : 

    <template>
      <div class="carList">
      <h1>Liste de contacts </h1>
        <ul v-for='contact in contacts' :key=contact.prenom>
        <li>{{ contact.prenom }} </li>
        <li>{{ contact.nom }}</li>
        <button @click='selectContact(contact)'> Voir les détails </button>
    </ul>
    <p> {{ counter }} Contacts </p>
    </div>
    </template>
     
    <script>
    import Vue from 'vue'
    import VueResource from 'vue-resource'
    Vue.use(VueResource);
     
    export default {
      data () {
        return {
          contacts: []
        }
      },
      http: {
        root: 'http://localhost:3000'
      },
      methods: {
        selectContact (contact) {
          this.$store.dispatch('selectContact', contact.id)
        }
      },
      computed: {
        counter () {
          return this.contacts.length
        }
      },
      mounted () {
    
        this.$resource('contacts')
            .get()
            .then(
                response => {
                  this.contacts = response.data
                  console.log(this)
                },
                response => {
                  console.log('erreur', response)
                },
                err => {
                  console.error(err)
                }
            )
     
        setTimeout(function() {
          this.contacts = [
            {
              "prenom": "Enzo",
              "nom": "SPINAZZOLA",
              "numero": "0624659874",
              "email": "spin.enzo13004@gmail.com"
    
            },
            {
              "prenom": "Charles",
              "nom": "LAHANCE",
              "numero": "0628975423",
              "email": "lahance.charles@gmail.com"
            }
          ]
        }.bind(this), 2000)
      }
    }
    </script>

    ContactDetails.Vue : 

    <template>
    	<div class="ContactDetails">
    		<h1> Détails du contact </h1>
    		<ul>
    			<li> Id : {{ contact.id }} </li>
    			<li>Prénom : {{ contact.prenom }} </li>
    			<li>Nom : {{ contact.nom }} </li>
    			<li>Numéro : {{ contact.numero }} </li>
    			<li>Email : {{ contact.email }} </li>
    		</ul>
    	</div>
    </template>
    
    <script>
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    export default {
    	computed: {
    	...Vuex.mapGetters({contact: 'selectedContact'})
    	}
    }
    </script>
    
    <style>
    	div.ContactDetails{
    		display: inline-block;
    		width: 40%
    	}
    </style>

    Main.Js : 

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import Vuex from 'vuex'
    import store from './components/AppStore'
    
    Vue.use(Vuex)
    Vue.config.productionTip = false
    
    export default window.bus = new Vue()
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    AppStore.js : 

    import Vue from 'vue'
    import Vuex from 'vuex'
    import VueResource from 'vue-resource'
    
    Vue.use(Vuex)
    Vue.use(VueResource)
    
    const state = {
    	contacts: {}
    }
    
    const getters = {
    	selectedContact: state => state.contacts
    }
    
    const mutations = {
    	SELECT_CONTACT: (state, contacts) => {
    		state.contacts = contacts[0]
    	}
    }
    
    const actions = {
    	selectContact: (store, contactId) => {
    		Vue.http.options.root = 'http://localhost:3000'
    		Vue.resource('details').get({id: contactId}).then ((reponse) => {
    			store.commit('SELECT_CONTACT', response.data)
    		}, (response) => {
    			console.log('erreur', response)
    		})
    	}
    }
    
    let store = new Vuex.Store({
    	state: state,
    	mutations: mutations,
    	getters: getters,
    	actions: actions,
    	strict: true
    })
    
    export default store

    Bonne chance pour m'aider x) Merci à ceux qui vont m'aider et qui vont aider les personnes qui auront ce même problème au futur ! :)






    -
    Edité par ByBreakk_ 14 juin 2019 à 14:29:48

    • Partager sur Facebook
    • Partager sur Twitter

    Oui, oui oui, ce sont des chiens.

      14 juin 2019 à 11:27:31

      Bonjour, nouveaux problème désolé , j'ai fais l'étape quand même ducoup :x

      EDIT : Vuex est installé :(

      -
      Edité par ByBreakk_ 14 juin 2019 à 11:28:22

      • Partager sur Facebook
      • Partager sur Twitter

      Oui, oui oui, ce sont des chiens.

        15 juin 2019 à 19:20:05

        Ton contact doit venir de vuex et non des props. Tu vas bien le chercher mais tu ne le modifie jamais, il est toujours undefined. import { mapGetters } from 'vuex' ça doit marcher. Pas besoin de dire plusieurs fois à vue qu'il doit utiliser vuex. Tu n'as plus besoin de contactPage, ce n'est plus lui qui connait le contact sélectionné mais vuex. Et dans contactList, au lieu d'utiliser la méthode de contactPage, commit ton action dans le store. Tu as accès au store avec this.$store.

        • Partager sur Facebook
        • Partager sur Twitter
          17 juin 2019 à 9:14:55

          Salut, j'ai cherché comment " commit " , je n'arrive pas aurais tu une doc ou autre choses pour me mettre sur le bon chemin ?? :x
          • Partager sur Facebook
          • Partager sur Twitter

          Oui, oui oui, ce sont des chiens.

            17 juin 2019 à 10:44:11

            Le tuto de vuex est plutôt bien fait : https://vuex.vuejs.org/fr/

            Il faut tout lire, pas juste cette page, et ensuite tu vas encore en chier un peu avant de vraiment comprendre comment ça marche. Je te conseille de faire ton store avec immutablejs ( https://github.com/immutable-js/immutable-js ) ça te permettras de faire moins d'erreurs.

            • Partager sur Facebook
            • Partager sur Twitter
              17 juin 2019 à 11:12:38

              Dac je vais voir merci

              EDIT : Je comprends pas vraiment comment sa marche je suis perdu ! :/

              Je penser que sa venais de mon npm install --vuex save car il détecter des vulnérabilités mais non , j'ai lancé un npm audit fix --force

              Certe il n'y a plus de vulnérabilités, mais sa ne marche toujour pas

              -
              Edité par ByBreakk_ 18 juin 2019 à 11:22:05

              • Partager sur Facebook
              • Partager sur Twitter

              Oui, oui oui, ce sont des chiens.

                18 juin 2019 à 11:22:09

                J'ai réussi !!! :) J'avais une erreur dans mon AppSTORE.Js car j'ai pris le code de ma doc qui est dispo sur github j'ai juste changé ce qu'il fallait changé et le tour est joué sauf que maintenant nouveaux problème! sa serait trop simple sinon ! x) 

                Quand je clique sur le contact " LAHANCE Charles" sa affiche les détails de " SPINAZZOLA Enzo" 

                • Partager sur Facebook
                • Partager sur Twitter

                Oui, oui oui, ce sont des chiens.

                  18 juin 2019 à 12:29:21

                  Je ne sais pas trop comment tu as fait ça du coup, peux-tu reposter AppStore, ContactDetails et ContactListe ?
                  • Partager sur Facebook
                  • Partager sur Twitter
                    18 juin 2019 à 14:22:06

                    Oui, les voilas : 

                    AppStore.js : 

                    import Vue from 'vue'
                    import Vuex from 'vuex'
                    import VueResource from 'vue-resource'
                    
                    Vue.use(Vuex)
                    Vue.use(VueResource)
                    
                    const state = {
                      contacts: {}
                    }
                    
                    const getters = {
                      selectedContact: state => state.contacts
                    }
                    
                    const mutations = {
                      SELECT_CONTACT: (state, contacts) => {
                        state.contacts = contacts[0]
                      }
                    }
                    
                    const actions = {
                      selectContact: (store, contactId) => {
                        Vue.http.options.root = 'http://localhost:3000'
                        Vue.resource('details').get({id: contactId}).then((response) => {
                          store.commit('SELECT_CONTACT', response.data)
                        }, (response) => {
                          console.log('erreur', response)
                        })
                      }
                    }
                    
                    let store = new Vuex.Store({
                      state: state,
                      mutations: mutations,
                      getters: getters,
                      actions: actions,
                      strict: true
                    })
                    
                    export default store

                    ContactDetails : 

                    <template>
                      <div class="contactDetails">
                        <h1> Détails du contact  </h1>
                        <ul>
                          <li>Prénom : {{ contact.prenom }} </li>
                          <li>Nom : {{ contact.nom }} </li>
                          <li>Numéro  : {{ contact.numero }}</li>
                          <li>Email : {{ contact.email}}</li>
                        </ul>
                      </div>
                    </template>
                    
                    <script>
                    // eslint-disable-next-line
                    import Vue from 'vue'
                    import Vuex from 'vuex'
                    
                    export default {
                      computed: {
                        ...Vuex.mapGetters({contact: 'selectedContact'})
                      }
                    }
                    </script>
                    
                    <style>
                      div.contactDetails{
                        display: inline-block;
                        width: 40%;
                      }
                    </style>

                    ContactList : 

                    <template>
                      <div class="contactList">
                      <h1> Liste contact </h1>
                        <ul v-for='contact in contacts' :key=contact.prenom>
                          <li>{{ contact.prenom }} </li>
                          <li>{{ contact.nom }}</li>
                          <button @click='selectContact(contact)'> Voir les détails </button>
                        </ul>
                        <p>{{ counter }} Contacts </p>
                      </div>
                    </template>
                    
                    <script>
                    import Vue from 'vue'
                    import VueResource from 'vue-resource'
                    Vue.use(VueResource)
                    
                    export default {
                      data () {
                        return {
                          contacts: []
                        }
                      },
                      http: {
                        root: 'http://localhost:3000'
                      },
                      methods: {
                        selectContact (contact) {
                          this.$store.dispatch('selectContact', contact.id)
                        }
                      },
                      computed: {
                        counter () {
                          return this.contacts.length
                        }
                      },
                      mounted () {
                        this.$resource('contacts')
                          .get()
                          .then(
                            response => {
                              this.contacts = response.data
                            },
                            response => {
                              console.log('erreur', response)
                            }
                          )
                      }
                    }
                    </script>
                    
                    <style>
                      div.contactList{
                        display: inline-block;
                        width: 40%;
                      }
                    </style>





                    • Partager sur Facebook
                    • Partager sur Twitter

                    Oui, oui oui, ce sont des chiens.

                      18 juin 2019 à 14:49:38

                      Dans ContactList, ligne 42, pas de problème de this ? ligne 29, c'est bien le bon contact ? Dans AppStore, ligne 26, c'est toujours le bon contact ? (il y a un s à contact ça me stresse chaque fois que je le vois, il n'y en a qu'un dans ce store, après tu peux faire une hashtable des contacts, ça devrais bien marcher aussi)

                      • Partager sur Facebook
                      • Partager sur Twitter
                        18 juin 2019 à 14:57:49

                        Dans le ContactList ligne 42 non, aucun problème, 

                        Quand j'appuis sur le bouton " Voir les détails " sous le contact " LAHANCE Charles " sa m'affiche les détails de " SPINAZZOLA Enzo ".

                        Ou ça le s à contact ??

                        Et je ne comprend pas trop la fin un hashtable, aurais-tu une doc qui m'explique comment faire ??

                        • Partager sur Facebook
                        • Partager sur Twitter

                        Oui, oui oui, ce sont des chiens.

                          18 juin 2019 à 15:54:23

                          Avec un store dans ce genre là :

                          import Vue from "vue";
                          import Vuex from "vuex";
                          import VueResource from "vue-resource";
                          
                          Vue.use(Vuex);
                          Vue.use(VueResource);
                          
                          const state = {
                            contacts: {},
                            selected: null
                          };
                          
                          const getters = {
                            selectedContact: state => state.contacts[state.selected] //renvoie undefined si pas de sélection
                          };
                          
                          const mutations = {
                            SELECT_CONTACT: (state, contactId) => {
                              state.selected = contactId;
                            },
                            LOAD_CONTACTS: (state, contacts) => {//contacts c'est un tableau des contacts, c'est bien ça ?
                              console.log("contacts", contacts);
                              const newContacts = {};
                              contats.forEach(contact => {
                                newContacts[contact.id] = contact;
                              });
                              state.contacts = newContacts;
                            }
                          };
                          
                          const actions = {
                            loadContacts: store => {
                              Vue.$resource("contacts")
                                .get()
                                .then(
                                  response => {
                                    store.commit("LOAD_CONTACTS", response.data);
                                  },
                                  response => {
                                    console.log("erreur", response);
                                  }
                                );
                            }
                          };
                          
                          let store = new Vuex.Store({
                            state,
                            mutations,
                            getters,
                            actions,
                            strict: true
                          });
                          
                          export default store;
                          

                          Tu pourrais faire un ContactList comme ça :

                          export default {
                            data () {
                              return {
                                contacts: []
                              }
                            },
                            http: {
                              root: 'http://localhost:3000'
                            },
                            methods: {
                              selectContact (contact) {//vérifie que c'est le bon contact ici
                                this.$store.commit('SELECT_CONTACT', contact.id)
                              }
                            },
                            computed: {
                              counter () {
                                return Object.keys(this.$store.contacts).length
                              }
                            },
                            mounted () {
                              this.$store.dispatch("loadContacts")
                            }
                          }

                          Et du coup, dans ContactDetails on vérifie si il y a un contact :

                          <template v-if="contact">
                            <div class="contactDetails">
                              <h1> Détails du contact  </h1>
                              <ul>
                                <li>Prénom : {{ contact.prenom }} </li>
                                <li>Nom : {{ contact.nom }} </li>
                                <li>Numéro  : {{ contact.numero }}</li>
                                <li>Email : {{ contact.email}}</li>
                              </ul>
                            </div>
                          </template>

                          Le gros avantage c'est que tous tes contacts sont dans le store, rien dans les composants. Je ne sais pas trop d'où viens ton erreur malheureusement, le mieux c'est de mettre des console.log() partout pour trouver où ça bug ^^

                          • Partager sur Facebook
                          • Partager sur Twitter
                            18 juin 2019 à 16:01:11

                            Ton code ne marche pas : 

                            Voila ce que sa m'affiche:(

                            Je dois rendre mon projet pour la semaine prochaine et je bloque sur sa, il faut que je rajoute encore " ajouter un contact " , " supprimer un contact " et " modifier un contact " :(

                            Vu que tes codes ne marchent pas, j'ai remis les miens 

                            Tous mes codes : 

                            ContactDetails : 

                            <template>
                              <div class="contactDetails">
                                <h1> Détails du contact  </h1>
                                <ul>
                                  <li>Prénom : {{ contact.prenom }} </li>
                                  <li>Nom : {{ contact.nom }} </li>
                                  <li>Numéro  : {{ contact.numero }}</li>
                                  <li>Email : {{ contact.email}}</li>
                                </ul>
                              </div>
                            </template>
                            
                            <script>
                            // eslint-disable-next-line
                            import Vue from 'vue'
                            import Vuex from 'vuex'
                            
                            export default {
                              computed: {
                                ...Vuex.mapGetters({contact: 'selectedContact'})
                              }
                            }
                            </script>
                            
                            <style>
                              div.contactDetails{
                                display: inline-block;
                                width: 40%;
                              }
                            </style>

                            ContactList : 

                            <template>
                              <div class="contactList">
                              <h1> Liste contact </h1>
                                <ul v-for='contact in contacts' :key=contact.prenom>
                                  <li>{{ contact.prenom }} </li>
                                  <li>{{ contact.nom }}</li>
                                  <button @click='selectContact(contact)'> Voir les détails </button>
                                </ul>
                                <p>{{ counter }} Contacts </p>
                              </div>
                            </template>
                            
                            <script>
                            import Vue from 'vue'
                            import VueResource from 'vue-resource'
                            Vue.use(VueResource)
                            
                            export default {
                              data () {
                                return {
                                  contacts: []
                                }
                              },
                              http: {
                                root: 'http://localhost:3000'
                              },
                              methods: {
                                selectContact (contact) {
                                  this.$store.dispatch('selectContact', contact.id)
                                }
                              },
                              computed: {
                                counter () {
                                  return this.contacts.length
                                }
                              },
                              mounted () {
                                this.$resource('contacts')
                                  .get()
                                  .then(
                                    response => {
                                      this.contacts = response.data
                                    },
                                    response => {
                                      console.log('erreur', response)
                                    }
                                  )
                              }
                            }
                            </script>
                            
                            <style>
                              div.contactList{
                                display: inline-block;
                                width: 40%;
                              }
                            </style>

                            AppStore.js : 

                            import Vue from 'vue'
                            import Vuex from 'vuex'
                            import VueResource from 'vue-resource'
                            
                            Vue.use(Vuex)
                            Vue.use(VueResource)
                            
                            const state = {
                              contacts: {}
                            }
                            
                            const getters = {
                              selectedContact: state => state.contacts
                            }
                            
                            const mutations = {
                              SELECT_CONTACT: (state, contacts) => {
                                state.contacts = contacts[0]
                              }
                            }
                            
                            const actions = {
                              selectContact: (store, contactId) => {
                                Vue.http.options.root = 'http://localhost:3000'
                                Vue.resource('details').get({id: contactId}).then((response) => {
                                  store.commit('SELECT_CONTACT', response.data)
                                }, (response) => {
                                  console.log('erreur', response)
                                })
                              }
                            }
                            
                            let store = new Vuex.Store({
                              state: state,
                              mutations: mutations,
                              getters: getters,
                              actions: actions,
                              strict: true
                            })
                            
                            export default store

                            ContactPage : 

                            <template>
                              <div class="page">
                                  <div class="content">
                                    <ContactList v-on:selected='setSelected($event)' />
                                    <ContactDetails :contact='selectedContact' />
                                  </div>
                              </div>
                            </template>
                            
                            <script>
                            import ContactList from '../components/ContactList.vue'
                            import ContactDetails from '../components/ContactDetails.vue'
                            export default {
                              data () {
                                return {
                                  selectedContact: {}
                                }
                              },
                              components: {ContactList, ContactDetails},
                              methods: {
                                setSelected (_selectedContact) {
                                  this.selectedContact = _selectedContact
                                }
                              }
                            }
                            </script>

                            main.js : 

                            import Vue from 'vue'
                            import App from './App'
                            import Vuex from 'vuex'
                            import store from './components/AppStore'
                            
                            Vue.use(Vuex)
                            Vue.config.productionTip = false
                            
                            export default window.bus = new Vue()
                            
                            /* eslint-disable no-new */
                            new Vue({
                              el: '#app',
                              store,
                              components: { App },
                              template: '<App/>'
                            })

                            Contacts.json :

                            {
                            	"contacts": [
                            		{
                            			"prenom": "Enzo",
                            			"nom": "SPINAZZOLA"
                            		},
                            		{
                            			"prenom": "Charles",
                            			"nom": "LAHANCE"
                            		}
                            	],
                            	"details": [
                            		{
                            			 "id": "1",
                            		  	 "prenom": "Enzo",
                            			 "nom": "Spinazzola",
                            			 "numero": "0652445624",
                            			 "email": "spin.enzo13004@gmail.com"
                            		},
                            		{
                            			 "id": "2",
                            			 "prenom": "Charles",
                            			 "nom": "Lahance",
                            			 "numero": "0628975423",
                            			 "email": "lahance.charles@gmail.com"		
                            		}
                                ]
                            }

                            App.vue : 

                            <template>
                              <div id="app">
                                <img src="./assets/logo.png">
                                <ContactPage prenom='Enzo' nom='Spinazzola' />
                              </div>
                            </template>
                             
                            <script>
                            import ContactPage from './pages/contactpage.vue'
                             
                            export default {
                              name: 'App',
                              components: {
                                ContactPage
                              }
                            }
                            </script>
                             
                             
                            <style>
                            #app {
                              font-family: 'Avenir', Helvetica, Arial, sans-serif;
                              -webkit-font-smoothing: antialiased;
                              -moz-osx-font-smoothing: grayscale;
                              text-align: center;
                              color: #2c3e50;
                              margin-top: 60px;
                            }
                            </style>



                            EDIT : Problème réglé

                            Dans AppStore ligne 23 et 25 j'ai remplacer les " Id " par " prénom " 

                            et dans contactlist ligne 29  j'ai remplacer contactId par contactPrenom 

                            Enfin résolu ! :) Merci à toi pierro5673 :p




                            -
                            Edité par ByBreakk_ 19 juin 2019 à 10:06:26

                            • Partager sur Facebook
                            • Partager sur Twitter

                            Oui, oui oui, ce sont des chiens.

                            [Vuej.s] Problème affichage détails contact

                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                            • Editeur
                            • Markdown