title: How can I reset input data on the modal in vue.js 2?
body: <p>My Vue component to display a modal is like this :</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="modal" tabindex="-1" role="dialog"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  ...
                      &lt;a href="javascript:"&gt;
                          &lt;img v-if="image == ''" :src="'https://myshop.co.id/img/no-image.jpg'" alt="" class="img-responsive"&gt;
                          &lt;img v-else :src="image" alt="" class="img-responsive" /&gt;
                      &lt;/a&gt;
                      ...
                      &lt;input type="file" v-on:change="changeImage"&gt;
                  ...          
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default{
          ...
          data() {
              return {
                  image: '',
                  ...
              }
          },
          methods: {
              changeImage($event) {
                  const selectedImage = $event.target.files[0]
                  const form = new FormData();
                  form.append('file', selectedImage);
                  // define the done handler
                  const onDone = (data) =&gt; {
                      if (!$.trim(data)) {   
                          alert('No response');
                      }
                      else {   
                          var files = $event.target.files || $event.dataTransfer.files
                          if (!files.length)
                              return;
                          this.createImage(files[0])
                          this.imageChanged = data
                          this.disabled = 0
                      }
  
                  }
                  // define th post options
                  const options = {
                      url: window.Laravel.baseUrl+'/product/addImage',
                      type: "POST",
                      data: form,
                      enctype: 'multipart/form-data',
                      processData: false,  // tell jQuery not to process the data
                      contentType: false   // tell jQuery not to set contentType
                  }
                  // submit the image
                  $.ajax(options).done(onDone);
              },
              createImage(file) {
                  var image = new Image()
                  var reader = new FileReader()
                  var vm = this
                  reader.onload = (e) =&gt; {
                      vm.image = e.target.result
                  };
                  reader.readAsDataURL(file)
              },
          } 
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>When the modal shows, it will display a file input.</p>
  
  <p>If I upload image using the file input, it will display that image in the HTML.</p>
  
  <p>When I close the modal and re-open it, the image is still displayed.</p>
  
  <p>I want to reset the input data in the modal so that when I open the modal again, the image will disappear.</p>
  
  <p>How can I do it?</p>