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>