add ingredient to shopping List - vue.js

Question

I have a project to add an ingredient in a recipe to "Shopping List".
And in this picture there are several ingredients at the bottom "sugar".
When I click on the plus sign I want to add the ingredient to the "shopping List".
How can I solve this problem?
In this file, you create an ingredient with this ingredient's data such as its name and quantity.
CreateIngredient:
<template>
<v-app>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<h2 class="btn-style">Add Ingredient</h2>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<form #submit.prevent="onAddIngredient">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field name="id" label="Id" id="id" v-model="id" color="#43A047" required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field name="name" label="Name" id="name" v-model="Name" color="#43A047" required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field name="ingredientsQuantity" label="Ingredients Quantity" id="ingredientsQuantity" v-model="Quantity" color="#43A047" multi-line required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-btn class="green darken-1 color" type="submit">
Add
</v-btn>
</v-flex>
</v-layout>
</form>
</v-flex>
</v-layout>
</v-container>
</v-app>
</template>
<script>
export default {
data() {
return {
id: "",
Name: "",
Quantity: "",
};
},
computed: {
formIsValid() {
return (
this.id !== "" &&
this.Name !== "" &&
this.Quantity !== ""
);
}
},
methods: {
onAddIngredient() {
if (!this.formIsValid) {
return;
}
const ingredientData = {
id: this.id,
Name: this.Name,
Quantity: this.Quantity
};
this.$store.commit("createIngredients", ingredientData);
const stringifiedData = JSON.stringify(ingredientData);
// console.log("S: ", stringifiedData);
localStorage.setItem("ingredient", stringifiedData);
console.log("We got : ", JSON.parse(localStorage.getItem("ingredient")));
}
},
};
</script>
<style scoped>
.btn-style {
color: #43a047;
}
.color {
color: #fafafa;
}
</style>
And this file that displays all the ingredients
shoppingList:
<template>
<div>
<v-container class="mb-30">
<v-flex class="floating-right">
<v-btn large router to="/CreateNewIngrediets" class="green darken-1 btn-style margine mr-50">
<v-icon class="green darken-1 btn-style">mdi-plus</v-icon>
</v-btn>
</v-flex>
<v-container>
<v-layout row wrap v-for="ingredient in ingredients" :key="ingredient.id" class="mb-3 mt-4">
<v-flex xs6 sm8 md4 offset-sm1 offset-md2>
<v-card class="grey lighten-4 pl-3 ">
<v-container fluid>
<v-layout row class="pl-14">
<v-flex xs7 sm8 md9>
<v-card-title primary-title>
<v-flex xs7 sm8 md9>
<div>
{{ ingredient.Name }}
</div>
</v-flex>
<v-flex xs7 sm8 md9>
<div>
{{ ingredient.Quantity }}
</div>
</v-flex>
<v-flex xs5 sm4 md2>
<v-btn class="deleteColorIcon">
<v-icon left class=" pl-4" #click="
$store.commit('delete_ingredient', ingredient.id)
">
mdi-delete
</v-icon>
<!-- </v-btn> -->
</v-btn>
</v-flex>
</v-card-title>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-container>
</div>
</template>
<script>
export default {
computed: {
Recipes() {
return this.$store.getters.loadedRecipes;
},
ingredients() {
return this.$store.getters.loadedingredients;
}
}
};
</script>
<style scoped>
.color {
color: #43a047;
}
.deleteColorIcon {
color: #e53935;
}
.btn-style {
color: aliceblue;
}
</style>
And this file that displays the recipe as the image above, and through it, all the recipe elements, including the ingredients, are displayed.
Recipe:
<template>
<v-container>
<v-layout row wrap>
<v-flex x12>
<v-card>
<!-- <v-card-title> -->
<v-card-text>
<h4 class="btn-style mt-4 mb-4 font">
{{ recipe.title }}
</h4>
<v-img height="530px" :src="recipe.imageUrl" class="mb-4"></v-img>
<div class="btn-style mb-6">
{{ recipe.description }}
</div>
<div v-for="ing in recipe.ingredients" :key="ing.id">
{{ ing.Name }} {{ ing.Quantity }}
<v-btn class="green darken-1 color mb-5 ml-4 mr-4 pl-50">
<v-icon class="green darken-1 btn-style">mdi-plus</v-icon>
</v-btn>
</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- <v-flex xs5 sm4 md2> -->
<v-btn class=" mb-4 mr-4">
<v-icon left class=" pl-4 ">
mdi-pen
</v-icon>
<!-- </v-btn> -->
</v-btn>
<!-- </v-flex> -->
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import {
mapGetters
}
from "vuex";
export default {
props: ["id"],
computed: {
recipe() {
const loadedRecipe = this.$store.getters.loadedRecipe(this.id);
console.log("We loaded a recipe with value : ", loadedRecipe);
return loadedRecipe;
},
ingredient() {
return this.$store.getters.loadedingredient(this.id);
}
},
methods: {
}
};
</script>
<style scoped>
.btn-style {
color: #43a047;
}
.color {
color: #fafafa;
}
.deleteColorIcon {
color: #e53935;
}
.font {
font-size: 30px;
}
</style>

Answer 1

You can put a on click observer un your button, define a function that would execute in such case and pass it the object you want to store like so:
<div v-for="ing in recipe.ingredients" :key="ing.id">
{{ ing.Name }} {{ ing.Quantity }}
<v-btn class="green darken-1 color mb-5 ml-4 mr-4 pl-50" #click="addToShoppingList(ing)">
<v-icon class="green darken-1 btn-style">mdi-plus</v-icon>
</v-btn>
</div>
Then in vuex, store it in the state using an action and a mutator:
export default new Vuex.Store({
state: {
shoppingList: []
},
getters: {
getShoppingList(state) { return state.shoppingList }
},
mutations: {
ADD_ITEM_TO_SHOPPING_LIST(state, ingParam) {
state.shoppingList.push(ingParam);
}
}
,
actions: {
addItemToShoppingList({commit}, ingParam) {
commit('ADD_ITEM_TO_SHOPPING_LIST', ingParam);
}
}
And last thing in your methods like so:
export default {
methods: {
addToShoppingList(ingParam) {
this.$store.dispatch('addItemToShoppingList', ingParam);
}
}
}
Hope it helps ;)