Discussion :

[fruwen7]

Bonjour ,

j’ai une table qui contient les données suivants (photo)



je veux faire un filter sur la table qui doit m’afficher juste les lignes du mois actuel , le filter je veux le faire avec la date d’expiration

N.B : j’utilise vuejs3 et store(vuex)

voici une partie de mon code :

Ma table :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
          <thead>
            <tr class="w3-blue">
              <th scope="col">Serveur</th>
              <th scope="col">Adresse Ip</th>
              <th scope="col">Date Debut</th>
              <th scope="col">Date Expiration</th>
              <th scope="col">Hebergeur</th>
              <th scope="col">Montant</th>
              <th scope="col">Etat</th>
            </tr>
          </thead>
          <tr
            v-for="servS in liste_serv"
            :key="servS.id"
          >
            <td>{{ servS.serv }}</td>
            <td>{{ servS.adip }}</td>
            <td>{{ servS.daD }}</td>
            <td>{{ servS.daE }}</td>
            <td>{{ servS.heb }}</td>
            <td>{{ servS.Mont }}</td>
            <td>{{ servS.Etat }}</td>
            </tr>
        </table>

j’ai essayé de créer un filtre mais ca marche pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const liste = store.getters[“global/getServ”];
const liste_serv = computed({
  get: () => {
    const liste = store.getters["global/getServ"];
 
    //date systeme
    const ds = new Date();
    const ms = ds.getMonth() + 1;
    console.log(ms);
 
    //date
    const dd = new Date(/*ici la date d'expiration */);
    const md = dd.getMonth() + 1;
    console.log(md);
    return liste.filter(ob => (ob.md = ob => ob.ms));
  },
});

comment faire pour prendre la date d’expiration de ma table et la faire afficher dans la console et après l’utilisé pour le filtre

store(vuex) :
state:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
export default function () {
  return {
    allServ: [],
  };
}

getters :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
export const getServ = (state) => {
  if (state.allServ) {
    return state.allServ;
  }
  return [];
};

mutations :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
export function setServ(state, data) {
  state.allServ = data;
}

[gwyohm]

hello,

j’ai essayé de créer un filtre mais ca marche pas

Le comportement que tu attends, je pense que c'est que la liste des serveurs est filtrée et ne contient que ceux qui expirent dans le mois, mais quel est le comportement observé ? tu les vois tous ?

Quelques pistes pour commencer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
const dd = new Date(/*ici la date d'expiration */);

tu as mis "ici la date d'expiration", c'est pcq tu ne sais pas faire ? quel est le format de la date dans ton store (je considère que c'est une String au format yyyy-MM-dd d'après ton template et la photo) ?
On est d'accord que ca devrait être fait pour chaque serveur, donc ca devrait être dans la closure de filter...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
return liste.filter(ob => (ob.md = ob => ob.ms));

Tu fais un filtre sur une affectation, ce qui renvoie undefined, donc falsy, donc j'imagine que tu ne vois rien au final.
Par ailleurs, l'affectation positionne une fonction qui accepte un parametre et renvoie la propriété ms de ce paramètre. Ce serait plutot qqch comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
const liste_serv = computed({
  get: () => {
    const liste = store.getters["global/getServ"];
 
    //date systeme
    const ds = new Date();
    const ms = ds.getMonth() + 1;
    console.log(ms);
    return liste.filter((server) => {
      const [yearExp, monthExp] = server.daE.split('-'); // on split sur '-' donc le premier element du tableau est l'année (en String), le deuxieme, le mois (en String), mais pour janvier, on a "01"
      return parseInt(monthExp, 10) === ms && parseInt(yearExp, 10)  === ds.getFullYear(); // renvoie true (donc conserve) si le mois du store est égal au mois courant et si l'année est celle en cours
    }); 
  },
});

[fruwen7]

Bonjour,

j'ai mis ici la date d'expiration parceque je ne sais pas comment la faire

je suis incapable de faire fonctionner correctement les outils mis à ma disposition (parceque je suis debutant sur ce language et je suis entrain d'apprendre )

Merci

[gwyohm]

mais du coup, avec mon dernier exemple, ca fonctionne comme tu veux ?