title: How to empty input fields from a pop-up window after submitting - Vue - laravel?
body: <p>My page exist of a table where I can add new rows. If you want to add a new row a pop-up window appear where the new values can be added.
  This new data is then saved to the database after submitting. If I again want to add a new row the input fields, they should be cleared.
  The method I use, is working but isn't very clear. </p>
  
  <p>Note: My code shows only a part of the input fields, to make it more clear. My pop-up window actually contains 20 input fields. </p>
  
  <p>I would like to clear them all at once instead of clearing them one by one (like I am doing now).
  Because I am already doing this for defining the v-model, pushing the new data to the database directly on the page and via post axios request. 
  Is there a cleaner way to do this?
  Thanks for any input you could give me. </p>
  
  <p>This is my code:</p>
  
  <h1>html part</h1>
  
  <pre><code>        &lt;div class="col-2 md-2"&gt;
              &lt;button class="btn btn-success btn-sx" @click="showModal('add')"&gt;Add New&lt;/button&gt;
                  &lt;b-modal :ref="'add'" hide-footer title="Add new" size="lg"&gt;
                      &lt;div class="row" &gt;
                          &lt;div class="col-4"&gt;
                              &lt;b-form-group label="Category"&gt;
                                  &lt;b-form-input type="text" v-model="newCategory"&gt;&lt;/b-form-input&gt;
                              &lt;/b-form-group&gt;   
                          &lt;/div&gt;
                          &lt;div class="col-4"&gt;
                              &lt;b-form-group label="Name"&gt;
                                  &lt;b-form-input type="text" v-model="newName" placeholder="cd4"&gt;&lt;/b-form-input&gt;
                              &lt;/b-form-group&gt;  
                          &lt;/div&gt;
                          &lt;div class="col-4"&gt;
                              &lt;b-form-group label="Amount"&gt;
                                  &lt;b-form-input type="number" v-model="newAmount" &gt;&lt;/b-form-input&gt;
                              &lt;/b-form-group&gt;   
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row" &gt;
                          &lt;div class="col-8"&gt;
                          &lt;/div&gt;
                          &lt;div class="col-4"&gt;
                              &lt;div class="mt-2"&gt;
                                  &lt;b-button @click="hideModal('add')"&gt;Close&lt;/b-button&gt;
                                  &lt;b-button @click="storeAntibody(antibodies.item)" variant="success"&gt;Save New Antibody&lt;/b-button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/b-modal&gt;
          &lt;/div&gt;
  </code></pre>
  
  <h1>js part</h1>
  
  <pre><code>        &lt;script&gt;   
          import { async } from 'q';
              export default {
                  props: ['speciedata'],
                  data() {
                      return {
                          species: this.speciedata,
                          newCategory: '',
                          newName: '',
                          newAmount:'',
                      } 
                  },
                  computed: {
  
                  },
                  mounted () {
                  },
                   methods: {
                      showModal: function() {
                          this.$refs["add"].show()
                      },
                      hideModal: function(id, expId) {
                          this.$refs['add'].hide()
                      },    
                      addRow: function(){
                          this.species.push({
                              category: this.newCategory,
                              name: this.newName,
                              amount: this.newAmount,
                          })
                      },
                  storeSpecie: async function() {
                      axios.post('/specie/store', {
                          category: this.newCategory,
                          name: this.newName,
                          amount: this.newAmount,
                      })
                      .then(this.addRow())
                      // Clear input
                      .then(
                          this.newName = '',
                          this.newCategory = '',
                          this.newAmount = '',
                      )
                      .then(this.hideModal('add'))
                  },
              }
          }
  
          &lt;/script&gt;
  </code></pre>