I would like to get an outer Element in Vue, using getElementById():

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

<script src=".5.2/vue.js"></script>
<div id="hello">
  hello
</div>
<div id="vue">
  {{helloElement}}
</div>

I would like to get an outer Element in Vue, using getElementById():

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

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

This brings me an empty Element, but not a null - which suggests that the query was partially successful (something was found).

This is actually a POC for a more general problem I face: the ability to get an outer Element (say, a container div) from within a Vue ponent (this brings me a null, which the documentation says to be the response when the element was not found).

Is it possible, from within a Vue object or ponent, to query an outside Element present in the DOM?

• javascript
• vue.js
• vue-ponent

• 1 You code works. The real question what do you expect to see with {{helloElement}}? – dfsq Commented Oct 31, 2017 at 14:58
• @dfsq: this is a good question. I expected to see a structure, but I just tested and checked for a propriety (via {{helloElement.scrollWidth}}) and see that it does exist. Thanks - I should have checked that earlier. If you do not mind to turn your ment into an answer I would gladly accept it. – WoJ Commented Oct 31, 2017 at 15:05
• May I know, what exactly you are trying to do? – Saurabh Commented Oct 31, 2017 at 15:20
• @Saurabh: I have a Vue ponent filled with text, it is on a page together with other ponents (fixed size). The text in the ponent will be variable, possibly so big that it would overflow from the screen (the application is a non-interactive one, a kind of dashboard which must fit in one window). Each time the text will change, I will change the size of the font, right up to an overflow (and then a bit back). I will check the overflow via element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth, where element is the outermost container. – WoJ Commented Oct 31, 2017 at 15:27
• @Saurabh (cont'd): This is why I needed the ability to get information about the container, which will be outside of the ponent which will implement the dynamic resize above. – WoJ Commented Oct 31, 2017 at 15:27

3 Answers 3

It is possible, as you can see. But be warned, that if you want something like this, your app is probably bad designed and you created entry poin for XSS attack.

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

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

Here is a snippet acplishing what I believe you want to do. I modified your example to use classes since I wanted to avoid having two elements with the same id. I'm just using outerHTML to get the DOM element as a string and then rendering it using Vue's v-html.

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

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

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

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

I think your code is working now and you are getting dom in helloElement.

Adding .innerHTML you will get the solution.