title: Enter more than one ingredient for a recipe
body: <p><a href="https://i.stack.imgur.com/qwIAs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qwIAs.png" alt="Recipe form" /></a></p>
  <p>This is a project to display recipes in addition to performing many operations on recipes such as deleting, adding and modifying. When adding a new recipe I want to add a set of ingredients and each ingredient has a name and quantity, but, I don't know how a label can be made for more than one ingredient.</p>
  <p>If we look at the picture for the last two fields, where the name of the component and its quantity are located, here I can only add one component, the question is how can I add two components?</p>
  <p><code>createRecipe.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;v-container&gt;
        &lt;v-layout row&gt;
          &lt;v-flex xs12 sm6 offset-sm3&gt;
            &lt;h2 class=&quot;btn-style&quot;&gt;Create Recipe&lt;/h2&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
        &lt;v-layout row&gt;
          &lt;v-flex xs12&gt;
            &lt;form @submit.prevent=&quot;onCreateRecipe&quot;&gt;
                &lt;v-layout&gt;
                &lt;v-flex xs12 sm6 offset-sm3&gt;
                  &lt;v-text-field
                    name=&quot;id&quot;
                    label=&quot;Id&quot;
                    id=&quot;id&quot;
                    v-model=&quot;id&quot;
                    color=&quot;#43A047&quot;
                    required
                  &gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
  
              &lt;v-layout&gt;
                &lt;v-flex xs12 sm6 offset-sm3&gt;
                  &lt;v-text-field
                    name=&quot;title&quot;
                    label=&quot;Title&quot;
                    id=&quot;title&quot;
                    v-model=&quot;title&quot;
                    color=&quot;#43A047&quot;
                    required
                  &gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout&gt;
                &lt;v-flex xs12 sm6 offset-sm3&gt;
                  &lt;v-text-field
                    name=&quot;imageUrl&quot;
                    label=&quot;ImageUrl&quot;
                    id=&quot;imageUrl&quot;
                    v-model=&quot;imageUrl&quot;
                    color=&quot;#43A047&quot;
                    required
                  &gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout&gt;
                &lt;v-flex xs12 sm6 offset-sm3&gt;
                  &lt;img :src=&quot;imageUrl&quot; height=&quot;300px&quot;&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout&gt;
                &lt;v-flex xs12 sm6 offset-sm3&gt;
                  &lt;v-text-field
                    name=&quot;description&quot;
                    label=&quot;Description&quot;
                    id=&quot;description&quot;
                    v-model=&quot;description&quot;
                    color=&quot;#43A047&quot;
                    multi-line
                    required
                  &gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout&gt;
                &lt;v-flex xs12 sm6 offset-sm3&gt;
                  &lt;v-text-field
                    name=&quot;ingredientsName&quot;
                    label=&quot;IngredientsName&quot;
                    id=&quot;ingredientsName&quot;
                    v-model=&quot;ingredientsName&quot;
                    color=&quot;#43A047&quot;
                    multi-line
                    required
                  &gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
               &lt;v-layout&gt;
                &lt;v-flex xs12 sm6 offset-sm3&gt;
                  &lt;v-text-field
                    name=&quot;ingredientsQuantity&quot;
                    label=&quot;IngredientsQuantity&quot;
                    id=&quot;ingredientsQuantity&quot;
                    v-model=&quot;ingredientsQuantity&quot;
                    color=&quot;#43A047&quot;
                    multi-line
                    required
                  &gt;
                  &lt;/v-text-field&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-layout row&gt;
                &lt;v-flex xs12 sm6 offset-sm3&gt;
                  &lt;v-btn
                    class=&quot;green darken-1 color&quot;
                    :disabled=&quot;!formIsValid&quot;
                    type=&quot;submit&quot;
                  &gt;
                    Create Recipe
                  &lt;/v-btn&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
            &lt;/form&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
      &lt;/v-container&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data() {
      return {
        id:&quot;&quot;,
        title: &quot;&quot;,
        imageUrl: &quot;&quot;,
        description: &quot;&quot;,
        ingredientsName: &quot;&quot;,
        ingredientsQuantity: &quot;&quot;,
      };
    },
    computed: {
      formIsValid() {
        return (
          this.id !== &quot;&quot;&amp;&amp;
          this.title !== &quot;&quot; &amp;&amp;
          this.description !== &quot;&quot; &amp;&amp;
          this.imageUrl !== &quot;&quot; &amp;&amp;
          this.ingredientsName !== &quot;&quot;&amp;&amp;
          this.ingredientsQuantity !== &quot;&quot;
        );
      }
    },
    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(&quot;S: &quot;, stringifiedData);
        localStorage.setItem(&quot;recipe&quot;, stringifiedData);
        console.log(&quot;We got : &quot;, JSON.parse(localStorage.getItem(&quot;recipe&quot;)));
        // this.$store.dispatch('createRecipe', recipeData).then(() =&gt; //alert('STH') or whatever you 
          want to do after you add recipe)
      }
    }
  };
  &lt;/script&gt;
  &lt;style scoped&gt;
  .btn-style {
    color: #43a047;
  }
  .color {
    color: #fafafa;
  }
  &lt;/style&gt;
  </code></pre>