Recipe data modification - vue.js

Question

This is a project to display food recipes, and several operations can be performed on the recipe, such as modifying the recipe, deleting a recipe, adding a recipe, but when modifying a recipe, I modify the data and press the Save button (as in the picture), but the modifications are not saved and I do not know why.
How can i solve the problem?
This is the form for modifying a recipe and from here the new data is passed to the recipe.
EditRecipesDetails:
<template>
<v-row justify="center">
<v-dialog v-model="editDialog" persistent max-width="500px" height="400px">
<template v-slot:activator="{ on, attrs }">
<v-btn
fab
accent
color="primary"
dark
v-bind="attrs"
v-on="on"
class="ml-70"
>
<v-icon>
mdi-pencil
</v-icon>
</v-btn>
</template>
<v-card>
<v-layout>
<v-flex xs12>
<v-card-title>
<span class="headline"> Edit Recipe</span>
</v-card-title>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field
name="title"
label="Title"
id="title"
v-model="editedTitle"
required
></v-text-field>
<v-text-field
name="description"
label="Description"
id="description"
v-model="editedDescription"
multi-line
required
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-layout>
<v-flex xs12>
<v-card-actions>
<!-- <v-spacer></v-spacer> -->
<v-btn
class="green--text darken-1"
text
#click="editDialog = false"
>
Close
</v-btn>
<v-btn
class="green--text darken-1"
text
#click="onSaveChanges = false"
>
Save
</v-btn>
</v-card-actions>
</v-flex>
</v-layout>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
export default {
props: ["recipe"],
data() {
return {
editDialog: false,
editedTitle: this.recipe.title,
editedDescription: this.recipe.description,
};
},
methods: {
onSaveChanges() {
if (
this.editedTitle.trim() === "" ||
this.editedDescription.trim() === ""
) {
return;
}
this.editDialog = false;
const stringifiedData = JSON.stringify(
this.$store.dispatch("updateRecipeData", {
id: this.recipe.id,
title: this.editedTitle,
description: this.editedDescription,
})
);
// console.log("S: ", stringifiedData);
localStorage.setItem("updateRecipe", stringifiedData);
console.log(
"We got : ",
JSON.parse(localStorage.getItem("updateRecipe"))
);
},
},
};
</script>
Here the button to edit the recipe is displayed.
And when you press this button, the modification form in the image appears.
Recipe:
<template>
<v-container>
<v-layout row wrap v-if="loading">
<v-flex xs12 class="text-xs-center">
<v-progress-circular
indeterminate
class="primary--text"
:width="7"
:size="70"
>
</v-progress-circular>
</v-flex>
</v-layout>
<v-layout row wrap v-else>
<v-flex x12>
<v-card>
<!-- <v-card-title> -->
<v-card-text>
<h4 class="btn-style mt-4 mb-4 font">
{{ recipe.title }}
</h4>
<template v-if="true">
<v-spacer></v-spacer>
<app-edit-recipe-details :recipe="recipe"></app-edit-recipe-details>
</template>
<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);
},
loading(){
return this.$store.getters.loading
},
...mapGetters([
//Here we put Getter
"loadedRecipe",
"loadedingredient",
])
}
};
</script>
<style scoped>
.btn-style {
color: #43a047;
}
.color {
color: #fafafa;
}
.deleteColorIcon {
color: #e53935;
}
.font {
font-size: 30px;
}
</style>
Here the functions for modifying the recipe data are written.
store:
import Vue from "vue";
import Vuex from "vuex";
import image1 from "../assets/img/image4.jpg";
import image2 from "../assets/img/image2.jpg";
import image3 from "../assets/img/image3.jpg";
import image4 from "../assets/img/insta2.jpg";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
loadedingredients: [
{ id: "1", Name: "Sugar", Quantity: "5kg" },
{ id: "2", Name: "Sugar", Quantity: "5kg" },
{ id: "3", Name: "Sugar", Quantity: "5kg" },
],
loadedRecipes: [
{
imageUrl: image3,
id: "3",
title: "Homemade Burger",
description:
"Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio
seating.."
},
{
imageUrl: image1,
id: "1",
title: "Cake",
description:
"Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio
seating.."
},
{
imageUrl: image4,
id: "4",
title: "Salad",
description:
"Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio
seating.."
},
{
imageUrl: image2,
id: "2",
title: "Kabseh",
description:
"Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio
seating."
},
],
user: [
{ name: "Hiba", email: "Hiba69#gmail.com", password: "123442321325" },
],
loading: false,
},
actions: {
updateRecipeData({commit},payload){
commit('setloading',true)
const updateObj = {}
if(payload.title){
updateObj.title == payload.title
}
if(payload.description){
updateObj.description == payload.description
}
commit('updateRecipe', payload)
localStorage.setItem('updateRecipe',this.loadedRecipes)
}
},
// like setters
mutations: {
updateRecipe(state,payload){
const recipe = state.loadedRecipes.find(recipe=>{
return recipe.id == payload.id
})
if(payload.title){
recipe.title = payload.title
}
if(payload.description){
recipe.description = payload.description
}
}
},
getters: {
loadedRecipes: (state) => {
return state.loadedRecipes.sort((RecipeA, RecipeB) => {
return RecipeA.id > RecipeB.id;
}).map(aRec => {
aRec['ingredients'] = [...state.loadedingredients];
return aRec;
})
},
loadedRecipe: (state) => {
return (recipeId) => {
return state.loadedRecipes.find((recipe) => {
return recipe.id === recipeId;
})
};
},
isLoggedIn: (state) => {
return state.isLoggedIn;
},
loading (state) {
return state.loading
},
},
});

Answer 1

<v-btn
class="green--text darken-1"
text
#click="onSaveChanges = false"
>
Save
</v-btn>
You are setting your method onSaveChanges to false when you should be calling the function. Modify #click="onSaveChanges = false" to #click="onSaveChanges" and you will be good to go