Displaying and hiding box onclick in vue js

Question

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.stack.imgur.com/sXyqY.jpg
after click: https://i.stack.imgur.com/aa9QA.jpg
Here is css image : https://i.stack.imgur.com/2Q8GT.jpg
vue js : https://i.stack.imgur.com/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: computedVisibility }"></div>
</div>

vue code

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

score 4 · Accepted Answer · answered Jan 15 '19 at 07:11

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
  })
});

answered Jan 15 '19 at 07:11

Brian Lee

17,904
3
41
52

that's work thanks, but that must be click on icon cart, how to eliminate it by clicking anywhere ? – Waya Jan 15 '19 at 07:25
To do that you need to detect clicks outside the elements boundaries. Hes an [example](https://stackoverflow.com/a/36180348/9556193). – Brian Lee Jan 15 '19 at 07:28

score 1 · Answer 2 · edited Jul 16 '22 at 02:30

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 recommend vuetify but if you're the old fashioned type you could even use bootstrap.

I like your approach, because there are situations like an expanding menu where you want to click bind somehting to elements conditionally hidden. If you use v-if instead, elements will be removed and added from the DOM conditionally and clickbinding may fail. — Dukeatcoding, Feb 26 '20 at 17:13

score -2 · Answer 3 · answered Jan 15 '19 at 07:24

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'
    },
    computed: {
        computedVisibility: function() {
            return this.visibility;
        }
    },
    methods: {
        showCart: function(event) {

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

        }
    }
});

Displaying and hiding box onclick in vue js

3 Answers3