I want to hide and display when I click on the icon cart. The problem is in hiding that box again,

icon before click : .jpg
after click: .jpg
Here is css image : .jpg
vue js : .jpg

mycss code :

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="showCart"></i>
<div id="list-cart">
    <div class="shadow-lg" style="position:absolute;background-color: #FFF;width:300px;height:300px;right:210px;top:60px;border-radius: 5px;" v-bind:style="{ visibility: putedVisibility }"></div>
</div>

vue code

    var cart = new Vue({
    el: '#cart',
    data: {
        visibility: 'hidden'
    },
    puted: {
        putedVisibility: function() {
            return this.visibility;
        }
    },
    methods: {
        showCart: function(event) {
            this.visibility = 'visible';
        }
    }
});

I want to hide and display when I click on the icon cart. The problem is in hiding that box again,

icon before click : https://i.sstatic/sXyqY.jpg
after click: https://i.sstatic/aa9QA.jpg
Here is css image : https://i.sstatic/2Q8GT.jpg
vue js : https://i.sstatic/ulQZT.jpg

mycss code :

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="showCart"></i>
<div id="list-cart">
    <div class="shadow-lg" style="position:absolute;background-color: #FFF;width:300px;height:300px;right:210px;top:60px;border-radius: 5px;" v-bind:style="{ visibility: putedVisibility }"></div>
</div>

vue code

    var cart = new Vue({
    el: '#cart',
    data: {
        visibility: 'hidden'
    },
    puted: {
        putedVisibility: function() {
            return this.visibility;
        }
    },
    methods: {
        showCart: function(event) {
            this.visibility = 'visible';
        }
    }
});

• javascript
• html
• css
• vue.js

Share Improve this question Follow edited Jan 15, 2019 at 8:13 smilyface 5,5411111 gold badges4444 silver badges6060 bronze badges asked Jan 15, 2019 at 6:56 WayaWaya 5311 gold badge11 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Use v-if instead of directly manipulating the styles:

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="visible = !visible"></i>
<div id="list-cart">
    <div class="shadow-lg" v-if="visible"></div>
</div>

var cart = new Vue({
  el: '#cart',
  data: () => ({
    visible: false
  })
});

You could try binding it to a class instead. Then you can have a ternary expression that determines your class.

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="showCart"></i>
<div id="list-cart">
    <div
     style="position:absolute;
     background-color: #FFF;
     width:300px;
     height:300px;
     right:210px;
     top:60px;
     border-radius: 5px;"
     v-bind:class="[visible ? 'show' : 'hide', 'shadow-lg']">
    </div>
</div>

Then you can have a data element, visible, that is set initially to false. You should also make data a function

data: () => ({
  visible: false
})

then your show cart function can just be:

showCart() {
        this.visible = !this.visible
    }

which you can also call to close the cart.

And then set your styles:

<style scoped>
  .show {
    visibility: visible
  }
.hide {
    visibility: hidden
  }
</style>

That said there are plenty of packages that offer 'modals' where this would largely be handled for you. I'd remend vuetify but if you're the old fashioned type you could even use bootstrap.

If the given script in your question works, you may just change the showCart function as below.

    var cart = new Vue({
    el: '#cart',
    data: {
        visibility: 'hidden'
    },
    puted: {
        putedVisibility: function() {
            return this.visibility;
        }
    },
    methods: {
        showCart: function(event) {

          if(this.visibility ==='visible'){
                this.visibility = 'hidden';
          }else if(this.visibility==='hidden'){
                this.visibility = 'visible'
          }

        }
    }
});