Vue.js 配方数据修改

这是一个显示食品配方的项目，可以对配方执行多个操作，例如修改配方、删除配方、添加配方，但在修改配方时，我修改了数据并按下了保存按钮（如图所示），但修改没有保存，我不知道为什么。 我怎样才能解决这个问题

这是修改配方的表单，新数据从此处传递到配方。 编辑详情：

        <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> 

拯救

当您应该调用函数时，您正在将方法

onSaveChanges

设置为

false

。将

@click=“onSaveChanges=false”

修改为

@click=“onSaveChanges”

，您就可以开始了

    <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>

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
    },
  },
});

 <v-btn
                        class="green--text darken-1"
                        text
                        @click="onSaveChanges = false"
                      >
                        Save
                      </v-btn>