Question

我有一个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时，我得到正确的值：

Answer 1

您的代码使用Vue 1.x工作。我将你的代码本地复制到.html文件中，它运行正常。我刚刚将脚本标记更改为指向CDN上的1.x版本的Vue。

如果您正在使用Vue 2.x，则无法再绑定到body元素。使用div身份验证添加id，您的代码在Vue 2.x中正常运行：

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

VueJS不绑定iframe内部

1 个答案: