bonjour,

Voila je galère depuis quelques jours, je m'explique:

Je m'occupe d'un projet qui à pour but de gérer des clés d'un post . Je passe par une API pour récupérer mes infos sur les clés des postes. Après avoir fait mon axios.get je stock tous sa dans un tableau indexé pour avoir toutes mes clés dedans + les info. Ensuite pour les afficher je créé une boucle avec un v-for depuis la table crée quand je récupere le json. Je créer alors pour chaque clé un <p> avec le nom de la clé et une div collaps dans laquel je créer un form avec dans chaque input une information sur la clé. Ceci me sert a donner la possibilité à l'admin de modifier, par exemple le commentaire de la clé ou le type de la clé, et de soumettre grâce à un bouton modifier. Le problème est le suivant , pour faire le post via ce formulaire avec axios je dois lui faire passer des paramètres, or je n'arrive pas à récupérer la value de mon input en me servant du v-model de celui-ci.

Si quelqu'un à une idéé je suis preneur

En vous remerciant par avance.

Voici le code , fait avec Quasar.

la template :

<template>
    <q-page>
        <!--debut de la nav side-->
    <div>
        <q-layout-drawer v-model="drawer">
            <q-list
                    no-border
                    link
                    inset-delimiter
            >
                <q-list-header>PANEL ADMIN</q-list-header>
                <q-item @click.native="openURL('http://quasar-framework.org')">
                    <q-item-side icon="vpn_key" />
                    <q-item-main label="Clés" sublabel="Acceder à toutes les clés" />
                </q-item>
                <q-item @click.native="openURL('https://github.com/quasarframework/')">
                    <q-item-side icon="flash_on" />
                    <q-item-main label="Postes" sublabel="Gérer les postes" />
                </q-item>
                <q-item v-if="data.session.role == 'superadmin'" @click.native="openURL('https://github.com/quasarframework/')">
                    <q-item-side icon="turned_in" />
                    <q-item-main label="Poles" sublabel="Gérer les poles" />
                </q-item>
                <q-item v-if="data.session.role == 'superadmin'" @click.native="openURL('https://github.com/quasarframework/')">
                    <q-item-side icon="supervised_user_circle" />
                    <q-item-main label="Utilisateur" sublabel="Gérer les utilisateurs" />
                </q-item>
            </q-list>
        </q-layout-drawer>
    </div>
        <!--fin de la nav side-->
        <!-- <q-table

          :data="tableData"

          :filter="filter"

          color="secondary"

         > -->
        <!--debut de la barre de recherche-->
            <template>
      <q-search

              float-label="Recherche multi-critères"

              clearable

              hide-underline

              color="secondary"

              v-model="filter"

      />
      <q-btn rounded push color="primary" label="+"/>
    </template>
        <!--fin de la barre de recherche-->
        <!--debut de la boucle pour générer toutes les clé-->
    <template>
      <div v-for="cle in tableData" :key="cle">
       <div>
         <p>{{cle.reference}}</p>
            <!-- div déroulante pour montrer les details des clés-->
            <q-collapsible icon="vpn_key">
              <!--formulaire pour envoyer/montrer les details des clés-->
              <form>
                <!--input pour marque de clé-->
                <label for="marque">Marque de clé</label><br>
                <input  id="marque" name="marque" v-model="cle.marque"><br>
                <!--fin input pour marque de clé-->
                <!--input pour le type de clé-->
                <label for="type">Type de clé</label><br>
                <input id="type" name="type" v-model="cle.name"><br>
                <!--fin input pour le type de clé-->
                <!--input caché pour récupérer l'id de la clé-->
                <input class="cache" name="id" v-model="cle.id"><br>
                <!--fin input caché pour récupérer l'id de la clé-->
                <!--input pour le commentaire de clé-->
                <label for="commentaire">Commentaire</label><br>
                <textarea id="commentaire" name="commentaire" cols="30" rows="10" v-model="cle.comments"></textarea><br>
                <!--fin input pour le commentaire de clé-->
                <!--boutton submit pour envoyer le formulaire-->
                <button type="button" @click="submitCle">Modifier</button>
                <!--fin boutton submit pour envoyer le formulaire-->
              </form>
              <!--fin du formulaire pour envoyer/montrer les details des clés-->
            </q-collapsible>
            <!-- fin div déroulante pour montrer les details des clés-->
       </div>
      </div>
    </template>
  <!-- </q-table> -->
        <!--fin de la boucle pour générer toutes les clé-->
    </q-page>
</template>

et mon script :

<script>

import { api } from 'plugins/axios'
export default {
  methods: {
    submitCle () {
      let cleModif = {
        id: this.cle.id,                       <--------- TypeError: this.cle is undefined
        marque_cle: this.cle.marque,           <--------- TypeError: this.cle is undefined
        type_cle: this.cle.name,               <--------- TypeError: this.cle is undefined
        commentaire_cle: this.cle.comments,    <--------- TypeError: this.cle is undefined
        action: 'upload'
      }
      console.log(cleModif)
      api.post('/Global/dest/cle', cleModif)
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  },
  created () {
    let i = 0, Cle = '', reference = '', marque = '', comments = '', tbl = [], id = ''
    api.get('/admin')
      .then((response) => {
        this.data = response.data
        // console.log(this.data)
        for (i = 0; i < this.data.cle.length; i++) {
          Cle = this.data.cle[i].type_cle
          reference = this.data.cle[i].refinterne_cle
          marque = this.data.cle[i].marque_cle
          comments = this.data.cle[i].commentaire_cle
          id = this.data.cle[i].id_cle
          tbl[i] = { reference: reference, name: Cle, marque: marque, comments: comments, id: id }
        }

        // console.log(tbl[i])
        this.tableData = tbl
        console.log(this.tableData)
      })
      .catch(() => {
        this.$q.notify({
          color: 'negative',
          position: 'top',
          message: 'Loading failed',
          icon: 'report_problem'
        })
      })
  },
  data: () => ({
    tableData: [],
    data: [],
    drawer: true,
    filter: ''
  })
}
</script>

Bonjour,

Tu n'as pas de this.cle dans ta logique. Tu peux passer l'objet cle en paramètre de submitCle() pour résoudre ton problème.

Merci pour ta réponse

Voici ce que je viens de faire

submitCle (cle) {
      let cleModif = {
        id: this.id
      }
      console.log(cleModif)

juste pour tester avec id mais j ai un retour de mon consol log qui me dit que l'id est undefined lors du submit

Object { id: undefined }
Index.vue:107
Error: "Request failed with status code 404"

submitCle(cle) {
  const cleModif = {//si tu ne compte pas modifier la variable, const est mieux
    id: cle.id
  }
}

comme ça ça marcheras mieux.

piero5673 a écrit:

submitCle(cle) {
  const cleModif = {//si tu ne compte pas modifier la variable, const est mieux
    id: cle.id
  }
}

comme ça ça marcheras mieux.

D'acc, j'ai effectué le même code que toi , j'ai la même erreur :/

edit :

bon suis passé en méthode barbare mais suis sur on peux mieux faire car la le code c'est une machine à tuer :

modif:

<template>
      <div v-for="(cle, i) in tableData" :key="`${i}-${cle.id}`">
       <div>
         <p>{{cle.reference}}</p>
            <!-- div déroulante pour montrer les details des clés-->
            <q-collapsible icon="vpn_key">
              <!--formulaire pour envoyer/montrer les details des clés-->
              <form>
                <!--input pour marque de clé-->
                <label for="marque">Marque de clé</label><br>
                <input  id="marque" name="marque" v-model="cle.marque"><br>
                <!--fin input pour marque de clé-->
                <!--input pour le type de clé-->
                <label for="type">Type de clé</label><br>
                <input id="type" name="type" v-model="cle.name"><br>
                <!--fin input pour le type de clé-->
                <!--input caché pour récupérer l'id de la clé-->
                <input class="cache" name="id" v-model="cle.id"><br>
                <!--fin input caché pour récupérer l'id de la clé-->
                <!--input pour le commentaire de clé-->
                <label for="commentaire">Commentaire</label><br>
                <textarea id="commentaire" name="commentaire" cols="30" rows="10" v-model="cle.comments"></textarea><br>
                <!--fin input pour le commentaire de clé-->
                <!--boutton submit pour envoyer le formulaire-->
                <button type="button" @click="submitCle({id:cle.id, marque_cle:cle.marque, type_cle:cle.name, commentaire_cle:cle.comments, action:'upload'})">Modifier</button>
                <!--fin boutton submit pour envoyer le formulaire-->
              </form>
              <!--fin du formulaire pour envoyer/montrer les details des clés-->
            </q-collapsible>
            <!-- fin div déroulante pour montrer les details des clés-->
       </div>
      </div>
    </template>

script :

import { api } from 'plugins/axios'
export default {
  methods: {
    submitCle (cle) {
      console.log(cle)
      api.post('/Global/dest/cle', cle)
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }

-
Edité par KevMu 5 décembre 2018 à 16:28:31

tu as bien mis cle en param quand tu appelle la fonction ?

Sinon, tu peux faire un component juste pour le formulaire, ça simplifieras la validation je pense. Il ne faut pas avoir peur de faire plein de components, en général plus tu en fais mieux c'est, il faut juste pas abuser au point de faire un component par div.

piero5673 a écrit:

tu as bien mis cle en param quand tu appelle la fonction ?

Sinon, tu peux faire un component juste pour le formulaire, ça simplifieras la validation je pense. Il ne faut pas avoir peur de faire plein de components, en général plus tu en fais mieux c'est, il faut juste pas abuser au point de faire un component par div.

oui mais c'était undefined ce qui est bizarre , je vais test les components sa peux bien m'aider effectivement merci pour tes réponses , c'est gentil d'avoir pris du temps pour répondre