title: Displaying and hiding box onclick in vue js
body: <p>I want to hide and display when I click on the icon <code>cart</code>. The problem is in  hiding that box again,</p>
  
  <p>icon before click : <a href="https://imgur.com/RxmcwsX" rel="nofollow noreferrer">https://imgur.com/RxmcwsX</a> <br>
  after click: <a href="https://imgur.com/cCt4mk0" rel="nofollow noreferrer">https://imgur.com/cCt4mk0</a> <br>
  Here is css image : <a href="https://imgur.com/d6ZPUbY" rel="nofollow noreferrer">https://imgur.com/d6ZPUbY</a> <br>
  vue js : <a href="https://imgur.com/2kWZdly" rel="nofollow noreferrer">https://imgur.com/2kWZdly</a> <br></p>
  
  <p>mycss code :</p>
  
  <pre><code>&lt;li class="nav-item" id="cart"&gt;
  &lt;i class="fa fa-shopping-cart fa-lg" @click="showCart"&gt;&lt;/i&gt;
  &lt;div id="list-cart"&gt;
      &lt;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 }"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></li></p>
  
  <p>vue code</p>
  
  <pre><code>    var cart = new Vue({
      el: '#cart',
      data: {
          visibility: 'hidden'
      },
      computed: {
          computedVisibility: function() {
              return this.visibility;
          }
      },
      methods: {
          showCart: function(event) {
              this.visibility = 'visible';
          }
      }
  });
  </code></pre>