Component ready() not firing for iframed vue instance

[kdocki]

Vue.js version

1.0.22

Reproduction Link

http://codepen.io/kelt/pen/KzJYqE

Steps to reproduce

Create a new Vue instance with el that points to loaded iframe body. Inside this iframe body create a component. The ready method is not called on this component even though the component is rendered with it's template.

What is Expected?

I expected the ready function to be called on the 'editable' component.

What is actually happening?

The ready function is never being invoked.

[iniaks]

$('#iframe').on('load', function()
{
  // var iframe = this.contentWindow.document.body; 
  // the 'this' points to the jquery object $('#iframe')
  var ifr = document.getElementById('iframe').contentWindow.document.body;

  new Vue({
    el: ifr,
    data: {
      title: 'Title injected as data'
    },
    components: {
      editable: editableComponent
    }
  })
});

You should use the native selector instead of jquery selector because the jquery selector returns a jquery object which cannot be operated by Vue.

Try this Code, the ready function should be invoked successfully:)

[kdocki]

So "this" points to a document node (not a jquery object $('#iframe')) but regardless, even when I swap out the iframe with document.getElementById (like in the code you have above), the ready function is still not invoked on my codepen. Try your code and you'll see the ready function is not still invoked.

[yyx990803]

This is because the ready check depends on a in-document check, and while the Vue instance is created in the main window, it is contained within the iframe's document, so the check failed...

You can use compiled instead before a fix is released.

[kdocki]

@yyx990803 Thanks man!