Question

我在ajax请求上遇到了与加载内容相关的小问题。

我正在创建一个Web应用程序，所有内容都在一个页面上，无需重新加载即可正常工作。所以我将内容部分划分为单独的文件，并将其加载到Ajax上。

如果我将所有内容加载到一个文件而不分成单独的文件，一切正常。但是当我创建内容文件并开始通过Ajax jQuery请求加载它时，Vue.js停止了{{variable}}或其他事件的正常工作。

我正在使用Vue.js v1和jQuery这个网络应用。

感谢您的回答。

Answer 1

Alvaras，

我给你发送一个html文件示例，我首先将其作为模板拉出来，然后附加vue实例。

我使用axios代替jQuery，因为它很酷，我已经包含了一堆代码注释，以帮助您了解正在发生的事情。

注意：仅从完全信任的服务器中提取模板文件！

// let's start by pulling template file and callback our page logic
axios.get('https://dl.dropboxusercontent.com/s/4fg33iyn7kie88s/template.html')
  .then( function(res){
    // 1.) render our template on the page
    renderTemplate(res.data);
    // 2.) create Vue instance
    newVueInstance();
  })
  .catch( err );

// create template on our page
function renderTemplate(html){
  var el = document.createElement('div'); // create new 'div'
  document.body.append( el ); // append it to body
  el.innerHTML = html; // and set html
}

// attach new Vue fn
function newVueInstance(){
  // build new vue instance
  var list = new Vue({
    el:"#list",
    data: { items: [], type: 'posts', },
    methods: {
      // let's pull data from remote host (JSON format)
      pullData: function(verb) {
        var url = "https://jsonplaceholder.typicode.com/" + verb;
        axios.get( url )
          .then( function(res){
            list.items = res.data;
            list.type = verb;
          })
        .catch( err );
      },
    },
  });
}

// handle err
function err(er){ console.log( er );}

ul,
li {
  list-style: none;
  padding: 5px;
}

li .title,
a {
  font-weight: 900;
  cursor: pointer;
}

<script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.5.8/dist/vue.min.js"></script>

使用Ajax加载的html文件时，Vue.js v1无法正常工作

1 个答案: