Vue.js v1がAjaxで読み込まれたhtmlファイルで正常に動作しない

Question

ajaxリクエストで読み込まれたコンテンツに関連する小さな問題があります。

私はすべてが1ページにあり、リロードや何もせずに作業しているWebアプリケーションを作成しています。そこで、コンテンツ部分を分割して別々のファイルに分割し、Ajaxで読み込みました。

ファイルを別々のファイルに分割せずにすべてを1つのファイルにロードすると、すべてが機能します。しかし、コンテンツファイルを作成してAjax jQueryリクエストで読み込むと、Vue.jsは{{variable}}や他のイベントで正常に動作しなくなりました。

私はこのWebアプリケーション用にVue.js v1とjQueryを使用しています。

ありがとうございました。

Answer 1

Alvaras、

は、私が最初にテンプレートとして引っ張った後、VUEインスタンスを装着しています1つのHTMLファイルを使用してあなたの例を送っています。

jQueryの代わりにaxiosを使用しました。これはすばらしく、何が起きているのかを理解するのに役立つコードのコメントが含まれています。

注意：完全に信頼できるサーバーからテンプレートファイルをプルするだけです。あなたは私たちにあなたが使用しているコードを与える必要があり

// 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>