如何为每个事件加载一个新的外部 HTML？

Question

问题：我想在modal界面显示一个v-html，内容来自一个URL (ajax)... 截取的代码是运行ning，但是很烂，不专业：试试运行。您单击 GO，留言说 CLOSE，然后再次单击 GO...
我需要用 Vue 的最佳实践“ 我的代码”。

问题：如何把这个界面做的更好，全靠Vuetify？

我需要一键式（GO）界面，用户等待时间最短。

（还需要加载其他 URLs，所以多次使用 AJAX 作为其他按钮等）

我假设 Vuetify 有很好的 AJAX-load 方法（如 these），所以我需要使用最好的方法！对于这种情况。

PS：我看不到如何在单个 HTML 页面（不是大型 Node.js 系统）中实施 Vue-AJAX 策略。

一个简化的丑陋界面示例

它是运行ning，但是混合了非 VueJS 代码并且有所有已解释的问题，由答案修复。

var URL = 'https://codepen.io/chriscoyier/pen/difoC.html';    
var loadFromUrl_cache = '... PLEASE WAYTE 10 seconds ...'+
    '<br/>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;
    }
  }
});

.myDialog { 
  padding: 10px;
  height: 100%;
  background-color: white; 
}

.myDialog .btn { margin: 20px 0 0 -4px; }

<link href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<div id="main">
  <v-expansion-panel>
    <v-btn @click="$emit('go-modal', {title: 'Hello', body: 'Bye!'})">Go</v-btn>
  </v-expansion-panel>
</div>

<div id="appDlg">
  <v-dialog v-model="dialog" fullscreen>
    <div class="myDialog">
      <v-btn @click="dialog = false">Close</v-btn>
      <h4>{{ ct_header }}</h4>
      <div v-html="ct_body"></div>
      <v-btn @click="dialog = false">Close</v-btn>
    </div>
  </v-dialog>
</div>

PS:感谢. If you prefer you can use codepen/NYRGyv.

Answer 1

I am supposing that Vuetify have good approaches to AJAX-load (as these), so I need to use the best one! for this situation.

你可以试试axios

然后你可以像这样改变 ct_body html:

handleMain(data) {
    var URL = "your HTML url here";
    axios.get(URL)
    .then(response => {
        this.ct_body = response.data;
    })
}

目前您的问题是您试图在获取数据之前更改html。

您应该在使用 ajax 调用检索后设置它。

请注意，从 url 获取 HTML 不是即时的（虽然它应该相对较快），因此取决于您要放置加载指示器的情况。因此，由您决定要在哪里设置 this.dialog = true - 在 .then() 内部，只有当您检索 html 数据时才会打开它。

Codepen

Answer 2

纯 Javascript（ECMAScript 2015）

我们可以使用 fetch() 及其嵌入的 promises! See developer.mozilla.org/Fetch_API/Using_Fetch。

handleMain(data) {
  var self = this;
  self.ct_header = data.title;      
  fetch(URL)
  .then(function(res) { return res.text(); })
  .then(function(data) {
    self.ct_body = data;
    self.dialog = true;
  });
}

...等同于axios，但是，看起来完全一样，解决方案更好因为避免丢失CPU-time、internet-bandwidth 和内存 (13kb) 加载 Axios。参见

https://codepen.io/ppKrauss/pen/oqYOrY

如何为每个事件加载一个新的外部 HTML？

How to load a new external HTML for each event?

ajax

vuetify.js

一个简化的丑陋界面示例

纯 Javascript（ECMAScript 2015）