title: Fill in table after form submit in vuejs
body: <p>I need the table to populate after I submit a form to an api in ASP.NET c#, the api request send the data back and then the table needs to fill.</p>
  
  <p>At the moment I tried to check if the form value is null or not, and after the submit it does show the table, but not the data inside the table.</p>
  
  <p>How do you make it so that after the form submit, the data from the api shows?</p>
  
  <pre class="lang-js prettyprint-override"><code>        new Vue({
              el: '#app',
              data: {
                info: [],
                IngredientCategory: '',
                IngredientCategory1: '',
  
              },
              methods: {
                  getFormValues() {
                      console.log("test " + this.IngredientCategory);
                      axios
                          .get("https://localhost:44331/Api/ShowRecipes/"+ this.ingredientCategory + "/" + this.ingredientCategory1 )
                          .then(response =&gt; this.info.concat(response.data))
                  },
              }
          });
  
  </code></pre>
  
  <p>html </p>
  
  <pre><code>            &lt;table v-if="info !== null"&gt;
                  &lt;thead class="thead-dark"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;#&lt;/th&gt;
                          &lt;th&gt;IngredientCategory&lt;/th&gt;
                          &lt;th&gt;IngredientName&lt;/th&gt;
                          &lt;th&gt;Calories&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr v-for="inf in info" :key="inf.Id"&gt;
                          &lt;td&gt;{{inf.Id}}&lt;/td&gt;
                          &lt;td&gt;{{inf.IngredientCategory}}&lt;/td&gt;
                          &lt;td&gt;{{inf.IngredientName}}&lt;/td&gt;
                          &lt;td&gt;{{inf.Calories}}&lt;/td&gt;
  
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;form @@submit.prevent="getFormValues()"&gt;
              &lt;input type="text"  v-model="IngredientCategory"&gt;
              &lt;input type="text" ref="IngredientCategory1" v-model="IngredientCategory1"&gt;
              &lt;button&gt;Get values&lt;/button&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>api data </p>
  
  <pre><code>[
      {
          "Id": 1,
          "IngredientName": "something",
          "IngredientCategory": "test",
          "Calories": 100
      },
      {
          "Id": 2,
          "IngredientName": "something",
          "IngredientCategory": "test",
          "Calories": 100
      },
  ]
  
  </code></pre>
  
  <p>...</p>