title: Reset input on click, vue
body: <p>I would like to have my text fields empty when I click "add task" button. How could I achieve that?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="col-md-6" &gt;
      &lt;div class="card bg-light mt-4"&gt;
        &lt;div class="card-header"&gt;Task Form&lt;/div&gt;
  
          &lt;div class="card-body"&gt;
            &lt;form action="./api/word" method="post" @submit.prevent="addTask()"&gt;
  
              &lt;div class="form-group"&gt;
                &lt;input type="text" name="title" v-model="title" placeholder="Local word" class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;input type="text" name="second_title" v-model="second_title" placeholder="Foreign word" class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;input type="submit" value="Add Task" class="btn btn-info"&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>export default {
    data() {
      return {
        title: '',
        second_title: ''
      }
  
    },
    mounted() {
      console.log('Component mounted.')
    },
    methods: {
  
      addTask() {
        Event.$emit('taskCreated', {
          title: this.title,
          second_title: this.second_title
        });
        axios.post('./api/word', {
          title: this.title,
          second_title: this.second_title,
  
        })
        this.title = '';
        this.second_title = '';
  
  
      }
  </code></pre>