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

Question

• 问题:我想一个显示v-html 为模态接口,内容来自一个URL(阿贾克斯)...的剪断代码运行,但它是坏的,不专业:尝试运行.你点击GO,收到一条消息说关闭并再次点击GO ...
  我需要用Vue的最佳实践" 宣传我的代码".

问题:如何更好地使用Vuetify这个界面？

我需要一键式(GO)界面,并且需要用户的最短等待时间.

(还需要加载其他URL,所以使用AJAX多次作为其他按钮等)

我假设Vuetify有很好的AJAX加载方法(就像这些),所以我需要使用最好的方法!对于这种情况.

PS:我没有看到如何在单个HTML页面(不是一个大的Node.js系统)中实现Vue-AJAX策略.

一个简化的丑陋界面示例

它正在运行,但正在混合非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:感谢这个答案的代码.如果您愿意,可以使用codepen/NYRGyv.

Answer 1

我认为 Vuetify 有很好的 AJAX 加载方法（如这些），所以我需要使用最好的方法！对于这种情况。

你可以试试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- inside.then()将使其仅在您检索 html 数据时打开。

代码笔