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

Question

[ilovemaryjane]

К примеру, есть компонент и вот что в его template

<div>
   <textarea></textarea> 
   <span></span>
</div>

Посредством this.$el я могу обратится ко всему корневому компоненту, а как обратится к одному лишь textarea

Как это зменить наиболее подходящим Vue способом, какие лучшие практики?

autosize(document.querySelectorAll('textarea'))

Comments

[Сергей Сергей]

this.$el.querySelector('textarea')

Answer 1

[Вадим Белкин]

<div>
   <textarea ref="textarea"></textarea> 
   <span></span>
</div>

this.$refs.textarea

Задаете атрибут ref для нужного элемента и по установленному значению обращаетесь в this.$refs

Про refs в документации

Answer 2

[Антон Антон]

какие лучшие практики?

Менять элементы только через связанные данные, избегать прямых манипуляций с DOM

Comments

[ilovemaryjane]

Вам не видно что используется сторонний плагин autosize? Какая смена элементов через связанные анные в этом случае?

[Антон Антон]

ilovemaryjane, самое простое - отказаться нафиг от текстарии, все равно все в данных vue будет :)
https://codepen.io/anon/pen/ZooQgW

[ilovemaryjane]

Лол, спасибо за совет, но contenteditable для полных мазохистов.

[Антон Антон]

ilovemaryjane, ну еще можно рисовать в фоне невидимый pre, стилизовать его также, как textarea и устанавливать высоту textarea в высоту pre, но тут уже получается тоже обращение к элементу нужно

[Антон Антон]

Хотя способ с contentEditable мне понравился, есть все-таки небольшие косяки:
https://codepen.io/anon/pen/ZooQgW - второе нажатие на test не работает
https://imgur.com/JwNEf7g

[ilovemaryjane]

Антон Антон, да куча проблем с contentEditable, и самое главное форматирование. Я textarea использую вместе с markdown, поэтому это самое главное.

[Антон Антон]

ilovemaryjane, ну, если изолировать манипуляции с DOM в компонент, то оно может быть и не так страшно