Skip to content

Instantly share code, notes, and snippets.

@c0depanda
Last active Jan 12, 2019
Embed
What would you like to do?
<template>
<main>
<h1>Cart Content</h1>
<p>Total Number of Items: {{totalNumberOfCartItems}}</p>
<form @submit.prevent="addItemToCart">
<input type="text" v-model="item" required>
<button type="submit">Add to cart</button>
</form>
</main>
</template>
<script>
export default {
data() {
return {
item: ''
}
},
computed: {
totalNumberOfCartItems() {
// Accessing the Vuex state
return this.$store.getters.totalNumberOfCartItems;
}
},
methods: {
addItemToCart() {
// Check that the input field isn't empty
if(this.item !== '') {
// commiting the additemtocart mutation with the payload
this.$store.commit('addItemToCart', this.item)
}
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment