Elemento DOM al componente vue.js correspondiente

Solución:

Solo por esto (en su método en “métodos”):

element = this.$el;

🙂

La forma correcta de hacerlo sería utilizar el v-el directiva para darle una referencia. Entonces puedes hacer this.$$[reference].

Actualización para vue 2

En Vue 2, las referencias se utilizan tanto para elementos como para componentes: http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced

En Vue.js 2 dentro de una instancia de Vue o Componente:

• Usar this.$el para obtener el elemento HTMLE en el que se montó la instancia / componente

Desde un HTMLElement:

• Usar .__vue__ desde el HTMLElement
  • P.ej var vueInstance = document.getElementById('app').__vue__;

Teniendo un VNode en una variable llamada vnode usted puede:

• usar vnode.elm para obtener el elemento al que se renderizó VNode
• usar vnode.context para obtener el VueComponent instancia en la que se declaró el componente de VNode (esto generalmente devuelve el componente principal, pero puede sorprenderlo cuando use slots.
• usar vnode.componentInstance para obtener el VueComponent real instancia de la que se trata VNode

Fuente, literalmente: vue / flow / vnode.js.

Demostración ejecutable:

Vue.config.productionTip = false; // disable developer version warning
console.log('-------------------')

Vue.component('my-component', {
  template: `<input>`,
  mounted: function() {
    console.log('[my-component] is mounted at element:', this.$el);
  }
});

Vue.directive('customdirective', {
  bind: function (el, binding, vnode) {
    console.log('[DIRECTIVE] My Element is:', vnode.elm);
    console.log('[DIRECTIVE] My componentInstance is:', vnode.componentInstance);
    console.log('[DIRECTIVE] My context is:', vnode.context);
    // some properties, such as $el, may take an extra tick to be set, thus you need to...
    Vue.nextTick(() => console.log('[DIRECTIVE][AFTER TICK] My context is:', vnode.context.$el))
  }
})

new Vue({
  el: '#app',
  mounted: function() {
    console.log('[ROOT] This Vue instance is mounted at element:', this.$el);
    
    console.log('[ROOT] From the element to the Vue instance:', document.getElementById('app').__vue__);
    console.log('[ROOT] Vue component instance of my-component:', document.querySelector('input').__vue__);
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<h1>Open the browser's console</h1>
<div id="app">
  <my-component v-customdirective=""></my-component>
</div>

---

---

Utiliza Nuestro Buscador