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>
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>
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.
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
VueJs - Problème pour recupéré mon v-model
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
comme ça ça marcheras mieux.