Как получить элемент по идентификатору в Vue?

1

Я хотел бы получить внешний Element в Vue, используя 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>

Это приносит мне пустой Element, но не null - это говорит о том, что запрос был частично успешным (что-то было найдено).

На самом деле это POC для более общей проблемы, с которой я сталкиваюсь: возможность получить внешний Element (скажем, контейнерный div) из компонента Vue (это приносит мне null, который, согласно документации, является ответом, когда элемент не был найден).

Возможно ли, изнутри объекта или компонента Vue запросить внешний Element присутствующий в DOM?

  • 0
    Ваш код работает. Реальный вопрос, что вы ожидаете увидеть с {{helloElement}} ?
  • 0
    @dfsq: это хороший вопрос. Я ожидал увидеть структуру, но я только что проверил и проверил правильность (через {{helloElement.scrollWidth}} ) и увидел, что она существует. Спасибо - я должен был проверить это раньше. Если вы не против превратить ваш комментарий в ответ, я с радостью приму его.
Показать ещё 4 комментария
Теги:
vue.js
vue-component

2 ответа

0

Возможно, как вы можете видеть. Но будьте осторожны, если вам нужно что-то подобное, ваше приложение, вероятно, плохо спроектировано, и вы создали запись для атаки 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>
Поделиться
0

Вот фрагмент, выполняющий то, что, как я считаю, вы хотите сделать. Я изменил ваш пример для использования классов, так как я хотел избежать наличия двух элементов с одним и тем же идентификатором. Я просто использую outerHTML чтобы получить элемент DOM в виде строки, а затем визуализировать его с помощью Vue 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню