Vue.js 编辑配方项目中的成分

这是一个显示配方并对其执行许多操作（如删除、添加和修改）的项目，但在执行修改过程时，我希望修改图标与删除图标一样出现在“组件”上。它出现在“组件”上方。 在图片中注意到修改图标出现在图标的侧面，而不是它上面，我希望图标出现在它上面。 如何解决这个问题

在这个文件中，您已经创建了修改“组件”的表单。 编辑部

<template>
  <v-row justify="center">
    <v-dialog v-model="editDialog" persistent max-width="1050px" height="400px">
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          fab
          accent
          class="grey lighten-1 margin"
          dark
          v-bind="attrs"
          v-on="on"
        >
          <v-icon>
            mdi-pencil
          </v-icon>
        </v-btn>
      </template>
      <v-card>
        <v-layout>
          <v-flex xs12>
            <v-card-title class="color">
              <span class="headline"> Edit Ingredient</span>
            </v-card-title>
          </v-flex>
        </v-layout>
        <v-divider xs12></v-divider>
        <v-layout>
          <v-flex xs12>
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12">
                    <v-text-field
                      name="ingredientsQuantity"
                      label="IngredientsQuantity"
                      id="ingredientsQuantity"
                      v-model="editedIngredientsQuantity"
                      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-btn
                class="green--text darken-1"
                text
                @click="editDialog = false"
              >
                Close
              </v-btn>
              <v-btn class="green--text darken-1" text @click="onSaveChanges">
                Save
              </v-btn>
            </v-card-actions>
          </v-flex>
        </v-layout>
      </v-card>
    </v-dialog>
  </v-row>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  props: ['ingredient'],
  data() {
    return {
      editedIngredientsQuantity: this.ingredient.ingredientsQuantity

    };
  },
  methods: {
    ...mapActions([
      'updateRecipeData'
    ]),
    onSaveChanges() {
      this.editDialog = false;    
      const stringifiedData = JSON.stringify(
        this.$store.dispatch('updateRecipeData', {
          id: this.ingredient.id,
          ingredientsQuantity: this.editedIngredientsQuantity
        })
      );
      // console.log("S: ", stringifiedData);
      localStorage.setItem("updateRecipe", stringifiedData);
      console.log(
        "We got : ",
        JSON.parse(localStorage.getItem("updateRecipe"))
      );
    },
  },
};
</script>    
<style scoped>
.color {
  color: green;
  font-size: 2px;
}
.margin {
  margin-left: 1000px;
}
</style>

---

它非常不清楚你需要代码做什么，以及它如何无法实现这一结果。例如，我想编辑配料的数量，而不是5kg。我将其编辑为9kg，但图标在配料“糖”之外

           <app-edit-ingredient-details :ingredient="ingredient"> </app-edit-ingredient-details>

<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>
                       <template v-if="true">
                                <v-spacer></v-spacer>
              <app-edit-ingredient-details :ingredient="ingredient"> </app-edit-ingredient-details>                        
                          </template>
                        <v-btn class="deleteColorIcon">
                          <v-icon
                            left
                            class=" pl-4"
                            @click="
                              $store.commit('delete_ingredient', ingredient.id)"
                          >
                            mdi-delete
                          </v-icon>
                        </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>
import { mapGetters } from 'vuex'
export default {
  props:['ingredientData','recipeData'],
  computed: {
    ...mapGetters([
      'loadedRecipes',
      'loadedingredients'
    ]),
    Recipes() {
      const recipes =  this.loadedRecipe(this.recipeData);
       console.log('shopping List: ', recipes);
        return recipes
    },
    ingredients() {
      const ingredient =  this.loadedingredients;
      console.log('ingredient/Component: ', ingredient);
      return ingredient 
    }            
  }
};
</script>    
<style scoped>
.color {
  color: #43a047;
}
.deleteColorIcon {
  color: #e53935;
}
.btn-style {
  color: aliceblue;
}
</style>

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import VueRoute from 'vue-router'
import { routes } from './router/index'
import { store} from './store'
import Vuetify from 'vuetify/lib'
import AlertCmp from './components/shared/alert.vue'
import EditRecipeDetails from './components/Recipes/Edit/EditRecipeDetails.vue'
import EditIngredientDetails from './components/shoppingList/Edit/EditIngrediet.vue'    
Vue.config.productionTip = false    
Vue.use(VueRoute)
Vue.use(Vuetify)
Vue.component('app-alert',AlertCmp)
Vue.component('app-edit-recipe-details',EditRecipeDetails)
Vue.component('app-edit-ingredient-details',EditIngredientDetails)    
const router = new VueRoute({
  routes,
  mode:'history'
})    
new Vue({
  vuetify,
  store,
  router,
  render: h => h(App),
}).$mount('#app')