Answer the question
In order to leave comments, you need to log in
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
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question