Partage

[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

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

Oui, oui oui, ce sont des chiens.

piero5673

14 juin 2019 à 11:25:06

Bonjour,

https://vuex.vuejs.org/fr/installation.html

ByBreakk_

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

Oui, oui oui, ce sont des chiens.

piero5673

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.

ByBreakk_

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

Oui, oui oui, ce sont des chiens.

piero5673

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.

ByBreakk_

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

Oui, oui oui, ce sont des chiens.

ByBreakk_

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"

Oui, oui oui, ce sont des chiens.

piero5673

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 ?

ByBreakk_

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>

Oui, oui oui, ce sont des chiens.

piero5673

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)

ByBreakk_

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 ??

Oui, oui oui, ce sont des chiens.

piero5673

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

ByBreakk_

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

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

Oui, oui oui, ce sont des chiens.

piero5673

19 juin 2019 à 10:38:43

np, gg ! =)