Discussion :

[Mickk_dev]

Bonjour,

Je suis débutant en développement, depuis quelque mois je réalise un projet de création de site E-commerce.
J'ai un problème qui a mon avis est simple mais je ne comprend pas la logique a mettre en place...

J'ai une liste de produit afficher avec un v-for sur ma page, je souhaiterai pouvoir faire référence au produit en particulier lorsque je clic sur le bouton associé :


(Ne faite pas attention aux "dénomination" ni au design)

J'ai utiliser la fonction v-if pour afficher un formulaire lorsque je clic sur le bouton mais le problème c'est qu'au lieu d'afficher un seul formulaire pour le seul élément cliqué, j'ai un formulaire pour tout les élément de la bouche.
(j'espère que je me fait comprendre mdr)



Je voudrais qu'en cliquant sur le bouton modifier, un seul formulaire s'affiche et fasse bien référence a l'item cliqué pour que je puisse bien modifié ce produit
Voici mon code :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template lang="">
    <div class="items-list mb-2" v-for="(item, _id) in items" :key="_id">
    {{ item.nom }}
        <div class="button">
            <button @click="showModifyForm(item)" class="btn btn-success">Modifier</button>
            <button @click="afficher()" class=" ms-2 btn btn-danger">Supprimer</button>
        </div>
        <form v-if="modifyForm" action="">
            <div class="name-item mb-3">
                <label for="name-label">Nom</label>
                <input v-model="nameItem" class="form-control" type="text" id="name">
            </div>
            <div class="description-item mb-3">
                <label for="description-label">Description</label>
                <textarea v-model="descriptionItem" class="form-control" name="" id="" cols="30" rows="5"></textarea>
            </div>
            <div class="image-item mb-3">
                <label for="image-labal">URL image</label>
                <input v-model="imageItem" class="form-control" type="url" name="" id="">
            </div>
            <div class="category-item mb-3">
                <label for="category-label">Catégorie</label>
                <select v-model="categoryItem" class="form-control" name="category" id="">
                    <option value="none">Catégorie...</option>
                    <option value="baume">Baume</option>
                    <option value="huile">Huile</option>
                    <option value="accessoire">Accessoire</option>
                </select>
            </div>
            <div class="price-item mb-3">
                <label for="price-label">Prix</label>
                <input v-model="priceItem" class="form-control" type="number" name="price" id="">
            </div>
            <div class="en-stock-item mb-3">
                <label for="en-stock-label">En stock</label>
                <select v-model="enStockItem" class="form-control" name="en-stock" id="">
                    <option value="true">Oui</option>
                    <option value="false">Non</option>
                </select>
            </div>
            <div class="submit-item text-center">
                <button @click="validateItem()" class="btn btn-primary" type="submit">Creer item</button>
            </div>
        </form>
    </div>
 
</template>
 
 
<script>
 
import axios from 'axios';
 
export default {
 
    data() {
        return {
            items: null,
            modifyForm: false
        }
    },
    methods: {
        showModifyForm(item) {
            if(this.modifyForm === false) {
                this.modifyForm = true;
            } else {
                this.modifyForm = false;
            }
            console.log(item)
        }
    },
     async created() {
        axios.get("http://localhost:3000/api/items").then((res) => {this.items = res.data})
    },
 
    
}
 
 
</script>
 
 
 
<style>
    .items-list {
        display: flex;
        justify-content: space-between;
    }
</style>

[gwyohm]

hello, ton souci, c'est que ton formulaire est dans ta boucle.
quand tu passes le booléen à true, il s'affiche pour chaque itération de ta boucle.
tu peux corriger facilement en conservant dans data l'index de l'élément cliqué et en testant si l'index courant est celui du produit édité pour afficher le formulaire

[Mickk_dev]

Merci pour ta réponse tout d'abord !

Je savais cela, mais je voulais que le formulaire s'affiche sur l'élément cliqué, c'est pour ça que je l'ai mis dans la boucle mais en effet logique qu'il s'affiche en dessous de tout les élements puisque comme tu l'a dit, le booléen passe a true pour chaque élément...

En revanche pour afficher le form directement sous l'élément, une idée ?

Merci !