CODEWITHSUNDEEP
vuejs2vue-component
AlexeiP
AlexeiP

Reputation: 653

How to initialize component's root dom element in Vue

In React use of arrow function does the trick

class AppComponent extends Component {

  componentDidMount() {
    this.createAppComponent()
  }

  createAppComponent() {
    const node = this.node

  }
  render() {
    return <div ref={node => this.node = node}></div>
  }
}

How can I initialize same node property in Vue component?

Upvotes: 1

Views: 575

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29109

In Vue, you use the $el of a ref to get the underlying DOM element.

<my-widget ref='theWidget' />

mounted() {
   const theElement = this.$refs.theWidget.$el
}

Other Comments

If you define the ref in a loop, 'theWidget' will be an array.

If the 'component' is just an HTML element (e.g. div or input) $el will be undefined because 'theWidget' will be the component reference.

Upvotes: 1

Related Questions