Showing the product count in the header of the app
It's common practice for a shop to show a link to the cart in the site's header—along with the number of items in the cart next to it. To achieve this, we'll use a Vuex getter to calculate and return the number of items in the basket.
Open the index.html
file and add a <header>
element to the app HTML and insert a placeholder, span
—we'll convert this to a link once we've set up the routes. Within the span, output a cartQuantity
variable:
<div id="app"> <header> <span>Cart {{ cartQuantity }}</span> </header> <main> <router-view></router-view> </main> <aside> <router-view name="sidebar"></router-view> </aside> </div>
Navigate to your Vue
instance and create a computed
object containing a cartQuantity
function:
new Vue({ el: '#app', store, router, computed: { cartQuantity() { } }, created() { CSV.fetch({url...