Vue.js v1이 Ajax 로딩 된 html 파일과 제대로 작동하지 않습니다.

Question

아약스 요청보다로드 된 콘텐트와 관련된 작은 문제가 있습니다.

모든 것이 하나의 페이지에 있고, 다시로드하지 않고도 작동하는 웹 앱을 만들고 있습니다. 그래서 컨텐츠 부분을 파일을 분리하여 Ajax로로드했습니다.

별도의 파일로 나누지 않고 모든 것을 하나의 파일로로드하면 모든 것이 작동합니다. 그러나 Ajax jQuery 요청을 통해 컨텐트 파일을로드하고로드 할 때 Vue.js는 {{variable}} 또는 다른 이벤트로 제대로 작동하지 않습니다.

저는이 웹 응용 프로그램에 Vue.js v1 및 jQuery를 사용하고 있습니다.

답변 해 주셔서 감사합니다.

Answer 1

Alvaras,

나는 내가 처음 템플릿으로 당겨 다음 VUE 인스턴스를 장착하고있어 하나 개의 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>