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" 
    } 
})

這就是我得到：

和JavaScript似乎工作正常，當我在控制檯auth.foo挖掘我得到正確的值：

來源

2016-10-11 Burawi

你代碼使用Vue 1.x工作。我將您的代碼本地複製到.html文件中，並且它工作正常。我只是將腳本標記更改爲指向CDN上Vue的1.x版本。

如果您使用Vue 2.x，則無法再綁定到body元素。添加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

回答

相關問題