VueJS는 iframe 내부에 바인딩되지 않습니다.

VueJs 코드를 사용하여 iframe에 넣기 전까지는 잘 작동했지만 이전에는 더 이상 바인딩 데이터가 아닙니다. VueJS는 iframe 내부에 바인딩되지 않습니다.

이

내 코드입니다 :

HTML (GLOBAL)

<!DOCTYPE html> 
<html> 
    <head> 
    <title>title</title> 
    </head> 
    <body> 
    <div class="appbar"> 
     <iframe src="/auth"></iframe> 
    </div> 
    </body> 
</html>

IFRAME 내용

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="bower/vue/dist/vue.min.js"></script> 
    </head> 
    <body id="auth"> 
    <div>{{foo}}</div> 
    <script src="js/auth.js"></script> 
    </body> 
</html>

JAVASCRIPT

var auth = new Vue({ 
    el: '#auth', 
    data: { 
     foo: "I'm a text but don't appear" 
    } 
})

그리고 이것은 내가 무엇을 얻을 :

그리고 자바 스크립트 내가 콘솔 auth.foo에 누를 때 나는 올바른 값을 얻을, 잘 동작하는 것 :

출처

2016-10-11 Burawi

당신의 코드는 Vue 1.x를 사용하여 작동합니다. .html 파일에 로컬로 코드를 복사했는데 정상적으로 작동했습니다. 방금 CDN에서 Vue의 1.x 버전을 가리 키도록 스크립트 태그를 변경했습니다.

Vue 2.x를 사용하는 경우 더 이상 본문 요소에 바인딩 할 수 없습니다. div에 id의 인증을 추가하면 Vue 2.x에서 코드가 올바르게 작동합니다.

<body> 
    <div id="auth"> 
     <div>{{foo}}</div> 
    </div> 
    <script src="js/auth.js"></script> 
    </body>

출처

2016-10-11 11:53:55 PatrickSteele

VueJS는 iframe 내부에 바인딩되지 않습니다.

답변

관련 문제