title: How to load a new external HTML for each event?
body: <ul>
  <li><em>Problem</em>: I want to show an <code>v-html</code>   into the <em>modal</em> interface, and the content comes from an URL (ajax)... The snipped code is running, but it is bad, not professional: try to run. You  click <em>GO</em>, take a message saying to <em>CLOSE</em> and click <em>GO</em> again... <br/>I need to "<a href="https://stackoverflow.com/q/30008114/287948">promisify</a> my code" with Vue's best practices.</li>
  </ul>
  
  <p><strong>Question</strong>: how to do this interface better, all with Vuetify?</p>
  
  <p>I need one-click (<em>GO</em>) interface, and with mininal waiting time for user.</p>
  
  <p>(need also to load other URLs, so using AJAX many times as other buttons, etc.)</p>
  
  <p>I am supposing that Vuetify have good approaches to AJAX-load (as <a href="https://vuejsdevelopers.com/2017/08/28/vue-js-ajax-recipes/" rel="nofollow noreferrer">these</a>), so I need to use the best one! for this situation.</p>
  
  <p>PS: I not see how to implement the Vue-AJAX strategies in a single HTML page (not a big Node.js system).</p>
  
  <h2>A simplified ugly-interface example</h2>
  
  <p>It is running, but is mixing non-VueJS code and have all the explained problems, to be fixed by the answer. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var URL = 'https://codepen.io/chriscoyier/pen/difoC.html';    
  var loadFromUrl_cache = '... PLEASE WAYTE 10 seconds ...'+
      '&lt;br/&gt;close and back here.';
  
  function loadFromUrl(URL,tmpStore) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == XMLHttpRequest.DONE) {
             if (xmlhttp.status == 200) {
                 loadFromUrl_cache = xmlhttp.responseText;
             } else {
                 alert('ERROR, something else other than status 200:'+
                 xmlhttp.status);
             }
          }
      };
      xmlhttp.open("GET", URL, true); // async
      xmlhttp.send();
  }
  
  // to get rid of "missing v-app" error message
  var app = document.createElement('div');
  app.setAttribute('data-app', true);
  document.body.appendChild(app);
  
  let mainVue = new Vue({ el: '#main' });
  
  new Vue({
    el: '#appDlg',
    data() {
      return {
        dialog: false,
        ct_header: 'the header1 here',
        ct_body: 'the body1 here'
      }
    },
    mounted() {
      mainVue.$on('go-modal', this.handleMain);
    },
    methods: {
      handleMain(data) {
        this.ct_header = data.title;
        loadFromUrl(URL,'tmp-store');
        this.ct_body = loadFromUrl_cache;
        this.dialog = true;
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.myDialog { 
    padding: 10px;
    height: 100%;
    background-color: white; 
  }
  
  .myDialog .btn { margin: 20px 0 0 -4px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"&gt;&lt;/script&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"&gt;
  
  &lt;div id="main"&gt;
    &lt;v-expansion-panel&gt;
      &lt;v-btn @click="$emit('go-modal', {title: 'Hello', body: 'Bye!'})"&gt;Go&lt;/v-btn&gt;
    &lt;/v-expansion-panel&gt;
  &lt;/div&gt;
  
  &lt;div id="appDlg"&gt;
    &lt;v-dialog v-model="dialog" fullscreen&gt;
      &lt;div class="myDialog"&gt;
        &lt;v-btn @click="dialog = false"&gt;Close&lt;/v-btn&gt;
        &lt;h4&gt;{{ ct_header }}&lt;/h4&gt;
        &lt;div v-html="ct_body"&gt;&lt;/div&gt;
        &lt;v-btn @click="dialog = false"&gt;Close&lt;/v-btn&gt;
      &lt;/div&gt;
    &lt;/v-dialog&gt;
  &lt;/div&gt;
     </code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>PS:   thanks to the <a href="https://stackoverflow.com/a/49309307/287948">code at this answer</a>. If you prefer you can use <a href="https://codepen.io/ppKrauss/pen/NYRGyv" rel="nofollow noreferrer">codepen/NYRGyv</a>.</p>