Не работает ни v-if, ни v-bind:class для появления объекта при нажатии на кнопку?

Question

[Ffinnis]

У меня есть компонент, в котором есть div и кнопка, при нажатии на кнопку div должен появляться, но этого не происходит. Пытался v-if или v-bind:class (в css прописывал, что при active div принимает display:flex) но ничего не меняется.

<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 1

[0xD34F]

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

Оберните isActive в ref.

Comments

[Ffinnis]

Спасибо, как-то даже не подумал о ref