javascript - Hur får man ett element via Id i Vue?

Jag skulle vilja få ett yttre Element i Vue, med 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>

Detta ger mig ett tomt Element, men inte ett null - vilket antyder att frågan var delvis lyckad (något hittades).

Detta är faktiskt ett POC för ett mer generellt problem jag möter: möjligheten att få ett yttre Element (säg en container div) från inom en Vue-komponent (detta ger mig null, vilket dokumentationen säger är svaret när elementet inte hittades).

Är det möjligt, från ett Vue-objekt eller en komponent, att fråga ett utanför Element som finns i DOM?

Svar #1

Det är möjligt, som du kan se. Men var försiktig, för om du vill ha något som detta, är din app förmodligen dåligt designad och du har skapat en ingångspunkt för XSS-attack.

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>

Svar #2

Här är ett utdrag som åstadkommer det jag tror att du vill göra. Jag modifierade ditt exempel för att använda klasser eftersom jag ville undvika att ha två element med samma id. Jag använder bara outerHTML för att få DOM-elementet som en sträng och sedan renderar jag det med Vués v-html.

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>