javascript - ¿Cómo obtener un elemento por Id en Vue?

Me gustaría obtener un Element exterior en Vue, usando getElementById():

new Vue({
  el: "#vue",
  data: {
    helloElement: document.getElementById('hello')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="hello">
  hello
</div>
<div id="vue">
  {{helloElement}}
</div>

Esto me devuelve un Element vacío, pero no un null, lo que sugiere que la consulta fue parcialmente exitosa (se encontró algo).

Esto es en realidad un POC para un problema más general que enfrento: la capacidad de obtener un Element externo (por ejemplo, un div contenedor) desde dentro de un componente Vue (esto me da un null, lo cual, según la documentación, es la respuesta cuando no se encuentra el elemento).

¿Es posible, desde dentro de un objeto o componente de Vue, consultar un Element externo presente en el DOM?

Respuesta #1

Es posible, como puedes ver. Pero ten cuidado, porque si quieres algo así, probablemente tu aplicación está mal diseñada y creaste un punto de entrada para un ataque XSS.

new Vue({
  el: "#vue",
  data: {
    helloElement: document.getElementById('hello').outerHTML
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="hello">
  hello
</div>
<div id="vue" v-html="helloElement"></div>

Respuesta #2

Aquí hay un fragmento que logra lo que creo que quieres hacer. Modifiqué tu ejemplo para usar clases, ya que quería evitar tener dos elementos con el mismo id. Solo estoy usando outerHTML para obtener el elemento del DOM como una cadena y luego renderizarlo usando v-html de Vue.

new Vue({
  el: "#vue",
  data: {
    helloElement: document.getElementsByClassName('hello')[0].outerHTML
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div class="hello">
  hello
</div>
<div id="vue">
  <div v-html="helloElement"></div>
</div>