는 동적 vuejs 내용을 추가 : scope.test 함수

Question

나는 다음과 같은 시나리오에 대한 가능한 해결책을 찾기 위해 노력하고 있어요되지 않습니다 :

먼저 "기본"내용을 렌더링합니다
1. vuejs;
2. 클릭이 발생하면 일부 vuejs 인식 HTML (구성 요소 참조 및 해당 데이터 포함)을로드합니다.
3. 동적으로로드 된 vuejs partial html은 미리 정의 된 노드 (마운트 포인트)에 컴파일되고 삽입되어야합니다.

이제 $ mount 기능을 사용해보십시오. 당신이 바이올린 또한 http://jsfiddle.net/matiascx/cd35khy8/ 에 대한 검사를 할 수 있습니다, 내가 코드를 여기에 붙여 넣습니다

<div id="app"> 
    <button v-on="click: addNewElement()">Add custom Element</button> 
    <br /> 
    <div id="dynamicloaded"></div> 
</div> 

new Vue({ 
    el: '#app', 
    data: { 
    sampleElement: '<div><button v-on="click: test()">Test</button></div>' 
    }, 
    methods:{ 
    addNewElement: function(){ 
     var vmtemp = Vue.extend({ 
         template: this.sampleElement, 
         methods: {} 
        }); 
     new vmtemp().$mount(document.getElementById('dynamicloaded')); 
    }, 
    test: function(){ 
     alert('Test'); 
    } 
    } 
}); 

vuejs 항상 불평 :

VM1881:3 Uncaught TypeError: scope.test is not a function 

내가 잘못 범위는 새로 장착 콘텐츠에 할당 된 때문입니다 궁금 .

1. 해결 방법은 무엇인가요? @ gurghet 덕분에, 그는 문제가 루트 범위에있는 테스트 기능에 액세스 할 수없는 새로운 마운트 된 '구성 요소'로 인해 발생했음을 지적했습니다.
2. 는 제안 된 방법 (동적 컴파일 및 권리 범위와 계산에 장착) 목표를 달성 내가이 티켓에 대한 실제적인 질문을 가지고, @gurghet하는 감사를 할 수 있다는 것입니다
3. 부모 내에서 정의 된 테스트 기능을 할 수 있도록하는 방법 그 동적으로 탑재 된 구성 요소에 사용할 수 있습니까? 4. 동적으로 마운트 된 구성 요소에 root-vue 인스턴스와 하위 - 상위 관계가없는 이유는 무엇입니까? 부모와 자식 관계를 유지하는 방법? 고마워 ~!

Answer 1

응용 프로그램을 디버깅하는 경우 test 옵션이 옵션에 없음을 알 수 있습니다. 이것은 '아버지'의 방법이기 때문입니다.

당신은, 당신이 옳다, 테스트 기능은 dynamicloaded

http://jsfiddle.net/L25oqe5n/