CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-directives
Lord Bear
Lord Bear

Reputation: 35

Vue directives how to 100% ensure component is in document

Hook Functions A directive definition object can provide several hook functions (all optional):

bind: called only once, when the directive is first bound to the element. This is where you can do one-time setup work.

inserted: called when the bound element has been inserted into its parent node (this only guarantees parent node presence, not necessarily in-document).

update: called after the containing component’s VNode has updated, but possibly before its children have updated. The directive’s value may or may not have changed, but you can skip unnecessary updates by comparing the binding’s current and old values (see below on hook arguments).

componentUpdated: called after the containing component’s VNode and the VNodes of its children have updated.

unbind: called only once, when the directive is unbound from the element.

None of these hooks guarantee the component is in document. Inserted works but has the potential to fail it seems?

How do you ensure the component is truly in the document?

Upvotes: 1

Views: 218

Answers (1)

17axaH
17axaH

Reputation: 484

{
  inserted: function (el) {
    document.contains(el) // true if element already exist in document
  },
}

Hope it help's

Upvotes: 0

Related Questions