Comment changer une table vuejs en fonction du choix de q-select

[Yadev7]

Bonjour,

j’ai une q-select (Quasar)

<q-select

            outlined

            color="blue"

            label="Choisir Un mois"

            v-model="selectedMonth"

            :options="months"

            @update:model-value="changeTable"

          />

et ces données :

selectedMonth: ref(null),
      months: [
        { label: 'Janvier', value: '01' },
        { label: 'Fevrier', value: '02' },
        { label: 'Mars', value: '03' },
        { label: 'Avril', value: '04' },
        { label: 'Mai', value: '05' },
        { label: 'Juin', value: '06' },
        { label: 'Juillet', value: '07' },
        { label: 'Aout', value: '08' },
        { label: 'Septembre', value: '09' },
        { label: 'Octobre', value: '10' },
        { label: 'Novembre', value: '11' },
        { label: 'Decembre', value: '12' },
      ],

une fonction changeTable qui doit changer les données de la table en fonction du mois choisi

function changeTable() {
      const liste = store.getters["global/getCotis"];
      return liste.filter(obj => {
        const mc = new Date(obj.mois_annee).toISOString().slice(0, 10).split("-");
        if (this.selectedMonth.value == mc[1]) {
          console.log(obj)
          return obj;
        }
      });
    }

quand je choisi un mois dans q-select il m’afficher les données corespond dans la console : console.log(obj) , mais il ne change pas la table meme si j’ai mis return obj;

comment faire ?

[zicklag]

@Yadev7

function changeTable() {
      const liste = store.getters["global/getCotis"];
      return liste.filter(obj => {
        const mc = new Date(obj.mois_annee).toISOString().slice(0, 10).split("-");
        if (this.selectedMonth.value == mc[1]) {
          console.log(obj)
          return obj;
        }
      });
    }

Peut-être que vous pouvez essayer ceci:

    function changeTable() {
      const liste = store.getters["global/getCotis"];
      this.months.value = liste.filter(obj => {
        const mc = new Date(obj.mois_annee).toISOString().slice(0, 10).split("-");
        if (this.selectedMonth.value == mc[1]) {
          console.log(obj)
          return true;
        }
      });
    }

[Yadev7]

merci pour ta reponse
j’ai changer obj par true , mais ca ne fonctionne pas

[zicklag]

Avez-vous aussi changer cette ligne?

return liste.filter(obj => {

pour

this.months.value = liste.filter(obj => {

[Yadev7]

oui il me dit que months n’est pas definie , ila connait pas

[zicklag]

Ah, j’avais mal compris.

Quel est le code de votre composant table?

[Yadev7]

oui c’est correcte j’ai mentionné : months … un array qui contient tous les mois

 months: [
        { label: 'Janvier', value: '01' },
        { label: 'Fevrier', value: '02' },
        { label: 'Mars', value: '03' },
        { label: 'Avril', value: '04' },
        { label: 'Mai', value: '05' },
        { label: 'Juin', value: '06' },
        { label: 'Juillet', value: '07' },
        { label: 'Aout', value: '08' },
        { label: 'Septembre', value: '09' },
        { label: 'Octobre', value: '10' },
        { label: 'Novembre', value: '11' },
        { label: 'Decembre', value: '12' },
      ],

[zicklag]

Je veux dire, quel code fait ce tableau:

[Yadev7]

voila le code du tableau

Liste des Cotisations

    <div class="q-pa-md">

      <table id="MA">

        <thead>

          <tr>

            <th> N° d'appartement </th>

            <th> Mois </th>

            <th> Montant </th>

          </tr>

        </thead>

        <!-- liste_cotisations -->

        <tr v-for="cotis in  store.getters['global/getCotis']" :key="cotis.id">

          <td> {{ cotis.id_habit }} </td>

          <td> {{ cotis.mois_annee }} </td>

          <td> {{ cotis.montant }} DH </td>

        </tr>

      </table>

    </div>

[zicklag]

Ah, d’accord.

Peut-être que vous pouvez utiliser une propriété calculée comme ceci:

const liste = computed(() => {
    return liste.filter(obj => {
        const mc = new Date(obj.mois_annee).toISOString().slice(0, 10).split("-");
        if (this.selectedMonth.value == mc[1]) {
          console.log(obj)
          return true;
        }
      });
});

Et ensuite pour votre table:

<div class="q-pa-md">
  <table id="MA">
    <thead>
      <tr>
        <th> N° d'appartement </th>
        <th> Mois </th>
        <th> Montant </th>
      </tr>
    </thead>

    <!-- liste_cotisations -->
    <tr v-for="cotis in liste" :key="cotis.id">
      <td> {{ cotis.id_habit }} </td>
      <td> {{ cotis.mois_annee }} </td>
      <td> {{ cotis.montant }} DH </td>
    </tr>
  </table>
</div>

Mais, je ne suis pas sûr que ça va marcher avec votre store.

[Yadev7]

Bonjour,
ca marche pas, merci pour vos effors

j’ai créer cette fonction :

function changeTable() {
      db.collection("cotisations")
        .where("mois_annee", "==", state.form.mois_annee)
        .get()
        .then(snapshot => {
          const liste = [];
          snapshot.docs.forEach(doc => {
            liste.push({ id: doc.id, ...doc.data() });
          });
          store.commit("global/setCotis", liste);
        });
    }

ca marche trés bien , mais j’ai changer le champs mois_annee au lieu de mettre la date au format 2023-01-15 , j’ai mis tous simplement un chiffre comme 01 ou 02 ect … qui represente le mois .

mais ce n’est pas efficace

la condition est comme ceci :

.where(“mois_annee”, “==”, state.form.mois_annee)

mois_annee c’est la valeur dans la base de donnée est qui s’affiche sur le tableau en haut , exemple : 2023-02-08 , et state.form.mois_annee c’est la valeur nommé mois dans le tableau months

months: [
        { label: 'Janvier', mois: '01' },
        { label: 'Fevrier', mois: '02' },
        { label: 'Mars', mois: '03' },
        { label: 'Avril', mois: '04' },
        { label: 'Mai', mois: '05' },
        { label: 'Juin', mois: '06' },
        { label: 'Juillet', mois: '07' },
        { label: 'Aout', mois: '08' },
        { label: 'Septembre', mois: '09' },
        { label: 'Octobre', mois: '10' },
        { label: 'Novembre', mois: '11' },
        { label: 'Decembre', mois: '12' },
      ],

ce que je dois faire c’est de prendre juste la valeur mois du mois_annee

exemple 2023-02-08 je dois prendre la valeur du mois 02 pour faire la condition avec mois du tableau months

j’espère que j’ai bien expliqué la situation

si tu vois une solution pour ca, je serai reconnaissant

Merci

[zicklag]

Désolé de ne pas avoir répondu, mais j’ai été très occupé. J’essaierai de regarder ça plus tard si j’en ai l’occasion.

[Yadev7]

C’est pas grave mon frère , j’ai régler ce probleme … maintenant j’ai un autre probleme
j’ai mentionner votre nom sur l’article dans le forum

peux tu m’aider ?

le voila :

Session pour chaque user dans firebase

Bonjour , j’ai une application web créer avec quasar (VUEJS3) dans la page d’acceuil j’ai un formulaire de connexion et de d’inscription CONNEXION : [Untitled] INSCRIPTION : [Untitled2] voici le code de la page login : <template> <div class="q-px-xl"> <br /> <div class="flex flex-center"> <q-img src="../assets/download.jpeg" /> </div> <div class="text-h6"> <h5 class="flex flex-center"> {{ access? 'CONNEXION': 'INSCRIPTION' }} </h5> </div> <div class="…

[creastysomp]

Désolé de ne pas avoir répondu, mais j’ai été très occupé. J’essaierai de regarder ça plus tard si j’en ai l’occasion.