Vue-material: [mdDialog] .open() -> Failed to execute 'appendChild' on 'Node'

Created on 9 Mar 2017 · 9Comments · Source: vuematerial/vue-material

I'm having an issue using vue-material inside a render(). I'm not sure this is best practice - but it seems it ought to work... I have tried to pair this down to as simple a test case as I possibly can. I fully expect this is my own misunderstanding of this library... Thanks!

Steps to reproduce

Use example here: http://codepen.io/anon/pen/NpdgdG?editors=1010#0 to attempt to open a dialog created within a Vue instance.

Which browser?

Chrome

What is expected?

The dialog opens without errors when .open() is called

What is actually happening?

It seems perhaps the context of the open call is wrong? I've tried using apply a lot to force it correctly but to no avail :(

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at VueComponent.open (vue-material.js:7)
    at VueComponent.boundFn [as open] (vue.runtime.common.js:127)
    at Vue$2.mounted (loginWindow.jsx:13)
    at callHook (vue.runtime.common.js:2219)
    at mountComponent (vue.runtime.common.js:2113)
    at Vue$2.$mount (vue.runtime.common.js:6676)
    at Vue$2.Vue._init (vue.runtime.common.js:3652)
    at new Vue$2 (vue.runtime.common.js:3733)
    at Object.<anonymous> (loginWindow.jsx:4)
    at __webpack_require__ (bootstrap 51edeba…:19)

Reproduction Link

http://codepen.io/anon/pen/NpdgdG?editors=1010#0

Any help is appreciated - thanks :)

bug

Source

erulabs

Most helpful comment

had the same problem, fixed it in a similar way as @ndpu but it's more Vue like

 mounted() {
    this.$nextTick(() => {
        this.$refs['dialog1'].open();
    });
}

yazfield on 11 Apr 2017

👍8 😕1

All 9 comments

Snackbar component has the same problem

calintro on 9 Mar 2017

I am getting a similar message when closing the dialog.

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at HTMLDivElement.cleanElement (eval at ../../../../vue-material/dist/vue-material.js ({{url}}/Scripts/Views/Vue/app.js:718:1), <anonymous>:4943:33) cleanElement @ vue-material.js?43da:4677

Thank you.

vin-e on 16 Mar 2017

I will investigate this issue!

marcosmoura on 21 Mar 2017

works with 0 timeout:

mounted () {
    setTimeout(() => {
      this.$refs['dialogref'].open()               
    }, 0);
}

ndpu on 4 Apr 2017

had the same problem, fixed it in a similar way as @ndpu but it's more Vue like

 mounted() {
    this.$nextTick(() => {
        this.$refs['dialog1'].open();
    });
}

yazfield on 11 Apr 2017

👍8 😕1

the workaround from @yazfield doesn't work fine for me.

Ken-Yang on 30 May 2017

@yazfield solution worked for me.

guanzo on 8 Jun 2017

I have a similar issue. The weird thing is that it happens only when I have a md-menu in the view that calls to the md-dialog and after I go back to the view. Very weird.