Кнопка открыть закрыть корзину как правильно организовать?

Question

[Виктор Л]

Пару фоток для наглядности
Фото1
После нажатия купить
Фото2
Вот теперь при нажатии на корзину она открывается
Фото 3
и кнопка меняется
Как организовать что бы теперь она закрывала корзину сам components/Cart.vue

<template>
  <div  class="cd-cart-container" :class="{'cart-open': showCart}" v-show="products.length" >
    <a href="#0" class="cd-cart-trigger" @click="showCart=true">
  		Корзина
  		<ul class="count"> <!-- cart items count -->
  			<li>{{itemsInCart}}</li>
  			<li>0</li>
  		</ul> <!-- .count -->
  	</a>
    <div class="cd-cart">
      <div class="wrapper">
        <header>
  				<h2 style="text-align: left;">Корзина</h2>
  				<span class="undo"> <a href="#0">Очистить</a></span>
  			</header>
  			<div class="body">
  				<ul>
  					<li class="product" v-for="p in products">
  					  <div class="product-image">
  					    <a href="#0"><img :src="p.image" :alt="p.name"></a>
  					 </div>
  					  <div class="product-details">
  					    <h3>{{ p.name }}</h3>
  					    <span class="price"> {{ p.price }} $</span>
  					    <div class="actions">
  					     <a href="#0" class="delete-item" @click='delToCart(p.id)'>Удалить </a>
  					     <div class="quantity">
  					      <label for="cd-product-4">Кол-во: </label>
  					      <span class="select">
  					     <select id="cd-product-4" name="quantity">
  					       <option value="1">{{ p.quantity }}</option>
  					       <option value="2">2</option>
  					       <option value="3">3</option>
  					       <option value="4">4</option>
  					       <option value="5">5</option>
  					       <option value="6">6</option>
  					       <option value="7">7</option>
  					       <option value="8">8</option>
  					       <option value="9">9</option>
  					     </select>
  					   </span>
  					     </div>
  					   </div>
  					   </div>
  					 </li>
  				</ul>
  			</div>
  			<footer>
  				<a href="#0" v-show="products.length" class="checkout btn" @click='checkout'><em>${{ total }}<span>0</span></em></a>
  			</footer>
       </div>
    </div>
  </div>
</template>

import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      showCart: false
    }
  },
  computed: {
    ...mapGetters({
      products: 'cartProducts'
    }),
    total () {
      return this.products.reduce((total, p) => {
        return total + p.price * p.quantity
      }, 0)
    },
    itemsInCart () {
      let cart = this.$store.getters.cartProducts
      return cart.reduce((accum, item) => accum + item.quantity, 0)
    }
  },
  methods: {
    checkout () {
      alert('Pay us $' + this.total)
    }
  }
}

Answer 1

[Виктор Л]

Все, чет перегрелся решение добавим метод toggle ()

<a href="#0" class="cd-cart-trigger" @click="toggle()">
  		Корзина ....

methods: {
    checkout () {
      alert('Pay us $' + this.total)
    },
    toggle () {
      this.showCart = !this.showCart
    }
  }