title: How to use vue.js syntax inside a string template with dropzone.js
body: <p>I am currently trying to implement <code>dropzone.js</code> <a href="http://www.dropzonejs.com/" rel="nofollow noreferrer">Doc Ref</a> - into my application. But since i've managed to run the basic functionallity of dropzone.js</p>
  
  <p>I want to customize the <code>preview-template</code> to hide and show the upload progressbar during different application state.</p>
  
  <p>I can customize the <code>preview-template</code> by passing an html string to the options object during initialization of the <code>dropzone</code> instance. As stated in the <code>dropzone.js</code> docs But obviously the <code>vue</code> syntax is not going to be processed if i simply sprinkle it over this html string. It somehow has to be processed to implement the thing.</p>
  
  <h1>Problem:</h1>
  
  <p>What i wanna do is to use <code>vue.js</code> syntax inside this preview-template.
  This is the component i'm talking about.</p>
  
  <h1>Code:</h1>
  
  <pre><code>&lt;dropzone id="myVueDropzone" :use-custom-dropzone-options=true
            :dropzoneOptions="dzOptions"
            :url="photosForm.uploadImageUrl"
            v-on:vdropzone-removed-file="deleteImage"
            :preview-template="templatePreview"
            v-on:vdropzone-success="showSuccess"&gt;
  &lt;/dropzone&gt;
  </code></pre>
  
  <h1>Vue-Script Code:</h1>
  
  <pre><code>import Dropzone from 'vue2-dropzone';
  export default {
  
      methods: {
  
          templatePreview(){
              return `
                      &lt;div class="dz-preview dz-file-preview"&gt;
                        &lt;div class="dz-image" style="width: 200px;height: 180px"&gt;
                            &lt;img data-dz-thumbnail /&gt;
                        &lt;/div&gt;
                        &lt;div class="dz-details"&gt;
                          &lt;div class="dz-size"&gt;&lt;span data-dz-size&gt;&lt;/span&gt;&lt;/div&gt;
                          &lt;div class="dz-filename"&gt;&lt;span data-dz-name&gt;&lt;/span&gt;&lt;/div&gt;
                        &lt;/div&gt;
  
                        &lt;div class="dz-progress"&gt;&lt;span class="dz-upload" data-dz-uploadprogress&gt;&lt;/span&gt;&lt;/div&gt;
                        &lt;div class="dz-error-message"&gt;&lt;span data-dz-errormessage&gt;&lt;/span&gt;&lt;/div&gt;
                        &lt;div class="dz-success-mark"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/div&gt;
                        &lt;div class="dz-error-mark"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=""&gt;
                          &lt;select class="form-control" title="" name="image_type"&gt;
                              &lt;options v-for="type in image_type" value="type.value"&gt;{{ type.title }}&lt;/options&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                `;
          }
      },
  }
  </code></pre>
  
  <p><a href="https://github.com/rowanwins/vue-dropzone" rel="nofollow noreferrer">Github Resource</a>, <a href="https://github.com/rowanwins/vue-dropzone/issues/143" rel="nofollow noreferrer">Github Issue</a></p>
  
  <p><strong>Author of library says,</strong></p>
  
  <blockquote>
    <p>Unfortunately what your wanting to do isn't easily achievable at the moment, although it would be nice. We're currently planning a bit of a rewrite of this module so we'll see if we can work out how to bake this in. <a href="https://github.com/rowanwins/vue-dropzone/issues/143" rel="nofollow noreferrer">Here</a></p>
  </blockquote>