Javascript 为一个配方输入多个配料

除了对配方执行许多操作（如删除、添加和修改）之外，这是一个显示配方的项目。当添加一个新配方时，我想添加一组配料，每种配料都有名称和数量，但我不知道如何为一种以上的配料制作标签

如果我们查看最后两个字段的图片，组件名称及其数量所在的位置，这里我只能添加一个组件，问题是如何添加两个组件

createRecipe.vue

：

<template>
  <v-app>
    <v-container>
      <v-layout row>
        <v-flex xs12 sm6 offset-sm3>
          <h2 class="btn-style">Create Recipe</h2>
        </v-flex>
      </v-layout>
      <v-layout row>
        <v-flex xs12>
          <form @submit.prevent="onCreateRecipe">
              <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="title"
                  label="Title"
                  id="title"
                  v-model="title"
                  color="#43A047"
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="imageUrl"
                  label="ImageUrl"
                  id="imageUrl"
                  v-model="imageUrl"
                  color="#43A047"
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <img :src="imageUrl" height="300px">
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="description"
                  label="Description"
                  id="description"
                  v-model="description"
                  color="#43A047"
                  multi-line
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="ingredientsName"
                  label="IngredientsName"
                  id="ingredientsName"
                  v-model="ingredientsName"
                  color="#43A047"
                  multi-line
                  required
                >
                </v-text-field>
              </v-flex>
            </v-layout>
             <v-layout>
              <v-flex xs12 sm6 offset-sm3>
                <v-text-field
                  name="ingredientsQuantity"
                  label="IngredientsQuantity"
                  id="ingredientsQuantity"
                  v-model="ingredientsQuantity"
                  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"
                  :disabled="!formIsValid"
                  type="submit"
                >
                  Create Recipe
                </v-btn>
              </v-flex>
            </v-layout>
          </form>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
      id:"",
      title: "",
      imageUrl: "",
      description: "",
      ingredientsName: "",
      ingredientsQuantity: "",
    };
  },
  computed: {
    formIsValid() {
      return (
        this.id !== ""&&
        this.title !== "" &&
        this.description !== "" &&
        this.imageUrl !== "" &&
        this.ingredientsName !== ""&&
        this.ingredientsQuantity !== ""
      );
    }
  },
  methods: {     
    onCreateRecipe() {
      if (!this.formIsValid) {
        return;
      }
      const recipeData = {
        id:this.id,
        title: this.title,
        description: this.description,
        imageUrl: this.imageUrl,
        ingredientsName:  this.ingredientsName,
        ingredientsQuantity: this.ingredientsQuantity
      };
    // Here we call the setter to put the Data inside it
      this.$store.commit('createRecipe', recipeData)
      const stringifiedData = JSON.stringify(recipeData);
      // console.log("S: ", stringifiedData);
      localStorage.setItem("recipe", stringifiedData);
      console.log("We got : ", JSON.parse(localStorage.getItem("recipe")));
      // this.$store.dispatch('createRecipe', recipeData).then(() => //alert('STH') or whatever you 
        want to do after you add recipe)
    }
  }
};
</script>
<style scoped>
.btn-style {
  color: #43a047;
}
.color {
  color: #fafafa;
}
</style>

创建配方
创建配方
导出默认值{
数据（）{
返回{
id:“”，
标题：“，
imageUrl:“”，
说明：“，
ingredientsName:“”，
InCreditSquantity:“”，
};
},
计算：{
formIsValid（）{
返回(
这个.id！==“”&&
这个标题！==“”&&
此文件名为。说明！==“”&&
this.imageUrl！==“”&&
此.IngreditsName！==“”&&
此.IngreditSquantity！=“”
);
}
},
方法：{
onCreateRecipe（）{
如果（！this.formIsValid）{
返回；
}
常数recipeData={
id:this.id，
标题：这个，
description:this.description，
imageUrl:this.imageUrl，
IngCreditsName:this.IngCreditsName，
IngCreditSquantity:this.IngCreditSquantity
};
//这里我们调用setter将数据放入其中
此.$store.commit（'createRecipe'，recipeData）
const stringifiedData=JSON.stringify（recipeData）；
//console.log（“S:，stringifiedData）；
setItem（“配方”，stringifiedData）；
log（“我们得到：”，JSON.parse（localStorage.getItem（“recipe”））；
//这是。$store.dispatch（'createRecipe'，recipeData）。然后（（）=>//alert（'STH'）或者任何你想要的东西
添加配方后想做什么）
}
}
};
.btn风格{
颜色：#43a047；
}
.颜色{
颜色：#fafafa；
}

制作一个包含ingredientName、ingredientQuantity的成分数组

ingredients: [
  {
    ingredientsName: "",
    ingredientsQuantity: "",
  },
  {
    ingredientsName: "",
    ingredientsQuantity: "",
  }
]

循环此数组以显示所有这些成分

您需要添加一个新按钮来添加新配料，然后在该按钮上单击，将此事件附加到下面

addIngredient () {
  this.ingredients = [...this.ingredients , {
    ingredientsName: "",
    ingredientsQuantity: ""
  }]
}

---

（）这是我的代码>>>当我单击“创建配方”时，我想输入不止一种成分，而不是一种。你想通过电子邮件发送项目吗？我向你发送电子邮件。请检查你的电子邮件。