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

element = this.$el;

:)

Si está comenzando con un elemento DOM, compruebe si hay una propiedad __vue__ en ese elemento. Cualquier modelo de vista Vue (componentes, máquinas virtuales creadas por v-repeat usage) tendrá esta propiedad.

Puede usar la función "Inspeccionar elemento" en la consola de desarrolladores de su navegador (al menos en Firefox y Chrome) para ver las propiedades del DOM.

¡Espero que eso ayude!

Dado que v-ref ya no es una directiva, sino un atributo especial, también se puede definir dinámicamente. Esto es especialmente útil en combinación con v-for.

Por ejemplo:

<ul>
    <li v-for="(item, key) in items" v-on:click="play(item,$event)">
        <a v-bind:ref="'key' + item.id" v-bind:href="item.url">
            <!-- content -->
        </a>
    </li>
</ul>

Y en el componente Vue puedes usar

var recordingModel = new Vue({
  el:'#rec-container',
  data:{
    items:[]
  },

  methods:{
    play:function(key,e){
      // it contains the bound reference
      console.log(this.$refs['item'+key]);
    }
  }
});

Así que me imaginé que $0.__vue__ no funciona muy bien con HOCs (componentes de alto orden).

// ListItem.vue
<template>
    <vm-product-item/>
<template>

De la plantilla anterior, si tiene el componente ListItem, que tiene ProductItem como root, y prueba $0.__vue__ en la consola, el resultado inesperadamente sería la instancia ListItem.

Aquí tengo una solución para seleccionar el componente de nivel más bajo (ProductItem en este caso).

Plugin

// DomNodeToComponent.js
export default {
  install: (Vue, options) => {
    Vue.mixin({
      mounted () {
        this.$el.__vueComponent__ = this
      },
    })
  },
}

Instalar

import DomNodeToComponent from'./plugins/DomNodeToComponent/DomNodeToComponent'
Vue.use(DomNodeToComponent)

Use

• En la consola del navegador, haga clic en dom elemento.
• Tipo $0.__vueComponent__.
• Haz lo que quieras con component. Datos de acceso. Hacer cambios. Ejecutar métodos expuestos desde e2e.

Función de bonificación

Si quieres más, puedes usar $0.__vue__.$parent. Es decir, si 3 componentes comparten el mismo nodo dom, tendrá que escribir $0.__vue__.$parent.$parent para obtener el componente principal. Este enfoque es menos lacónico, pero da un mejor control.

En SDV.js 2 Dentro de una instancia de Vue o Componente:

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

De una HTMLElement:

• Use .__vue__ desde el elemento HTMLElement
  • Por ejemplo var vueInstance = document.getElementById('app').__vue__;

Teniendo un VNode en una variable llamada vnode puedes:

• use vnode.elm para obtener el elemento al que se renderizó VNode
• use vnode.context para obtener la instancia de Vue que VNode belogs a
• use vnode.componentInstance para obtener la instancia del componente en la que VNode se encuentra

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

Demo ejecutable:

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('My Element is:', vnode.elm);
    console.log('My componentInstance is:', vnode.componentInstance);
    console.log('My Vue Instance is:', vnode.context);
  }
})

new Vue({
  el: '#app',
  mounted: function() {
    console.log('This Vue instance is mounted at element:', this.$el);
    
    console.log('From the element to the Vue instance:', document.getElementById('app').__vue__);
    console.log('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>

Si desea escuchar un evento (es decir, OnClick) en una entrada con id" demo", puede usar:

new Vue({
  el: '#demo',
  data: {
    n: 0
  },
  methods: {
   onClick: function (e) {
     console.log(e.target.tagName) // "A"
     console.log(e.targetVM === this) // true
  }
 }
})

Exactamente lo que Kamil dijo,

element = this.$el

Pero asegúrate de no tener instancias de fragmento.

Dado que en Vue 2.0 no hay solución disponible, una solución limpia que encontré es crear un atributo vue-id, y también establecerlo en la plantilla. Luego, en created y beforeDestroy ciclo de vida, estas instancias se actualizan en el objeto global.

Básicamente:

created: function() {
    this._id = generateUid();
    globalRepo[this._id] = this;
},

beforeDestroy: function() {
    delete globalRepo[this._id]
},

data: function() {
    return {
        vueId: this._id
    }
}