F
F
Ffinnis2021-05-10 16:56:40
Vue.js
Ffinnis, 2021-05-10 16:56:40

Neither v-if nor v-bind:class works to make object appear on button click?

I have a component that has a div and a button, when the button is clicked the div should appear but it doesn't. I tried v-if or v-bind: class (in css I wrote that it takes display: flex when active div) but nothing changes.

<template>
    <div class="shop-open">
        <button v-on:click="setActive" class="btn-openShop">
            Открыть магазин
        </button>
    </div>
    <div class="shop-wrapper" v-if="isActive">
        <ul class="upgrade-list">
            <li class="upgrade-item">
                <div class="item-title">
                    Подкачать бицепс
                </div>
                <button @click="upClickPower(1)" class="buy-item">
                    Купить
                </button>
            </li>
            <li class="upgrade-item">
                <div class="item-title">
                    Купить крутую палку
                </div>
                <button @click="upClickPower(3)" class="buy-item">
                    Купить
                </button>
            </li>
            <li class="upgrade-item">
                <div class="item-title">
                    Купить Корсар 1
                </div>
                <button @click="upClickPower(5)" class="buy-item">
                    Купить
                </button>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Shop",
        setup() {
            let isActive = false
            return {
                isActive
            }
        },
        methods: {
            upClickPower(indexPower) {
                this.$store.commit('incrementClickPower', indexPower)
                console.log(this.$store.state.clickPower)
            },
            setActive() {
                this.isActive = true

                console.log(this.isActive)
            }
        }
    }

</script>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2021-05-10
@Ffinnis

setup() {
    let isActive = false
    return {
        isActive
    }
},

Wrap isActive in ref .

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question