Désactiver un bouton lors d'une sélection d'une option

**tony060** · 24/05/2021, 11h38

Bonjour,

Je galère un peu sur mes options que j'ai mis en place, lorsque je sélectionne une option, mes boutons se trouvant sous chaque option se désactive eux aussi. Je souhaite que les autres boutons restent activées pour si je souhaite ajouter une autre option.
Merci par avance pour votre aide.

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
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
90
91
92
93
94
95
96
97
98
<template>
    <div>
        <div v-for="option in options" :key="option.id_option">
            <div>
                <img :src="option.imageUrl_Option" alt="image des options">
            </div>
            <div>
                <p>{{ option.name_Option }}</p>
                <div v-if="option.id_option == option_id">
                    <span v-show="showDescription"> {{ description }}</span>
                    <button v-show="showDescription" @click="noShow()">X</button> 
                </div>
                <button  v-show="!showDescription" @click="show(option.id_option)" >  
                    <div>
                        <span>+ d information</span> 
                    </div>  
                </button> 
            </div>
            <div>
                <div>
                    <p>{{ option.price_Option }} EUR</p>
                    <p>Tarif pour 1 jour</p>
                </div>
                <div  >
                    <div>
                        <button  @click="counter -= 1" :disabled="counter < 1"><i class="fas fa-window-minimize"></i></button>
                            <p v-if="option.id_option == selectOption">{{ counter }}</p>
                            <p v-else> {{ count }}</p>
                        <div >
                                 <button @click="addOption(option.id_option, counter += 1)" :disabled="counter > 0">+</button>
                        </div>
 
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import axios from 'axios'
export default {
    name:'GetAllOption',
    data(){
        return{
            options:[],
            showDescription: false,
            description:localStorage.getItem('id_option'),
            description:"",
            test:"",
            option_id:"",
            selectOption:"",
            counter: 0,
            count:0,
            isAdmin: localStorage.getItem('isAdmin'),
            disaTest: false
 
        }
    },
    beforeMount(){
        axios.get('http://localhost:3000/api/option')
        .then((response) => {
            console.log(response)
            this.options = response.data.results
        }).catch((err) => {
            console.log(err)
        });
    },
    methods:{
        addOption(options){
            axios.get(`http://localhost:3000/api/option/${options}`)
            .then((response) => {
                console.log(response.data.results[0].description_Option)
                this.selectOption = response.data.results[0].id_option
                localStorage.setItem('selectOption', this.selectOption)
            }).catch((err) => {
                console.log({err: err})
            });
        },
        noShow(){
            localStorage.removeItem('id_option')
            this.showDescription = !this.showDescription
        },
        show(options){
            this.showDescription = !this.showDescription 
            localStorage.setItem('id_option', options)
            axios.get(`http://localhost:3000/api/option/${options}`)
            .then((response) => {
                console.log(response.data.results[0].description_Option)
                this.description = response.data.results[0].description_Option
                this.option_id = response.data.results[0].id_option
            }).catch((err) => {
                console.log({err: err})
            });
        },
    }
}
</script>

**Séb.** · 24/05/2021, 20h35

Dur dur de comprendre ce que tu veux sans code à exécuter. Tu peux nous préparer cela ?

**tony060** · 24/05/2021, 22h54

Merci Seb pour ton message, c'est vrai que c'était un peu compliquer pour expliquer ce que je voulais. Après de longs efforts, j'ai pu trouver comment faire. J'ai créé une page avec des options du genre gps, siège auto, etc... Du coup, lorsque je voulais ajouter une option tous les compteurs sous chaque option augmentée, et vu que j'autorisais un ajout par option les compteurs des autres étaient en "disabled" . Enfin je viens de trouver, pour en venir à ce que j'ai pu trouver , j'ai créé un composant bouton-counter et j'ai créé mes boutons ici. J'ai trouvé les explications sur la doc vuejs. Je vais mettre le lien pour si quelqu'un galère et une photo pour que ce soit plus parlent. Après je ne sais si tout ce que j'ai fais et la meilleure façon mais ça fonctionne

.

le lien:
https://fr.vuejs.org/v2/guide/components.html

Nom : test.jpg
Affichages : 67
Taille : 22,4 Ko

**tony060** · 25/05/2021, 14h22

J'ai crié victoire trop vite. Je pensais avoir réussi mais non, j'ai créé un composant bouton comme décrit dans mon commentaire précécent, cependant je ne récupére pas l'id de l'objet sélectionner. J'ai ensuite essayer avec vueX, pour moi c'était parfait cependant je reviens au premier problème c'est-à-dire que toutes les quantités se modifie en même temps. Je vais mettre une pour montrer ce que je souhaite faire.le système d'ajout d'option que l'on peut voir dans l'image.

Nom : option.jpg
Affichages : 50
Taille : 79,0 Ko

Nom : option.jpg
Affichages : 50
Taille : 79,0 Ko

**tony060** · 25/05/2021, 17h20

Bonjour @Séb,

J'ai créé un exemple du code pour pouvoir tester, lorsque j'ajoute une quantité à une option , toutes les options affiche la même quantité.

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
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
 
<template>
    <div>
         <div v-for="optionTests in ArrayOption" :key="optionTests.id">
            <p>{{ optionTests.id}}</p>
            <p>{{ optionTests.name}}</p>
            <p>{{ optionTests.description}}</p>
            <button  @click="testCount -= 1" :disabled="testCount < 1">-</button>
            <p>{{ testCount }}</p>
            <button @click="testCount += 1" :disabled="testCount > 0">+</button>
        </div>
    </div> 
</template>
 
<script>
import axios from 'axios'
 
export default {
    name:'GetAllOption',
    data(){
        return{
            ArrayOption:[
                {
                    id:1,
                    name: 'option1'
                    description: 'je suis l option 1 ajoute moi au panier'
                },
                {
                    id:2,
                    name: 'option2'
                    description: 'je suis l option 2 ajoute moi au panier'
                },
                {
                    id:3,
                    name: 'option3'
                    description: 'je suis l option 3 ajoute moi au panier'
                },
                {
                    id:4,
                    name: 'option4'
                    description: 'je suis l option 4 ajoute moi au panier'
                }
            ],
            testCount:0,
        }
    }
}

**Séb.** · 25/05/2021, 17h58

Les compteurs de tes options partagent tous la même variable compteur $data.testCount => Ils réagissent donc tous ensemble, c'est normal.

Il faudrait que chaque option ait son propre compteur, en dur ça donnerait ce qu'on a ci-dessous.

Dans ton code il faudrait pour chaque option injecter un count à 0 (ou autre valeur par défaut) lorsque tu récupères la data avec Axios.

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
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
<script type="module">
    import * as Vue from "https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.js";
 
    Vue.createApp({
        data() {
            return {
                ArrayOption: [
                    {
                        id: 1,
                        name: 'option1',
                        description: 'je suis l option 1 ajoute moi au panier',
                        count: 0,
                    },
                    {
                        id: 2,
                        name: 'option2',
                        description: 'je suis l option 2 ajoute moi au panier',
                        count: 0,
                    },
                    {
                        id: 3,
                        name: 'option3',
                        description: 'je suis l option 3 ajoute moi au panier',
                        count: 0,
                    },
                    {
                        id: 4,
                        name: 'option4',
                        description: 'je suis l option 4 ajoute moi au panier',
                        count: 0,
                    }
                ],
            };
        }
    }).mount("main");
</script>
<main>
    <div v-for="optionTests in ArrayOption" :key="optionTests.id" style="border: 1px solid black; padding: 10px">
        <p>{{ optionTests.id}}</p>
        <p>{{ optionTests.name}}</p>
        <p>{{ optionTests.description}}</p>
        <button @click="optionTests.count -= 1" :disabled="optionTests.count < 1">-</button>
        <p>{{ optionTests.count }}</p>
        <button @click="optionTests.count += 1" :disabled="optionTests.count > 0">+</button>
    </div>
</main>

**tony060** · 25/05/2021, 21h06

Merci beaucoup @Séb ça fonctionne

merci pour ton aide.

Désactiver un bouton lors d'une sélection d'une option

VueJS

Discussions similaires

Partager

Partager