Получить значение выбранного класса vuejs

Question

Я с трудом пытаюсь передать значение div активному классу. Пользователь может выбрать любой тег, и он будет активен. Только один тег может быть активным одновременно.

<div class="tag-box">
     <div class="tag">Tag 1</div>
     <div class="tag active">Tag 2</div>
</div>

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

axios.post('http://localhost:4000/articles', {
   title: this.title,
   description: this.description
   tag: ????
 })

Поскольку это не HTML-тег выбора, сделать это немного сложнее. Можно ли использовать оператор if внутри почтового запроса?

Надеюсь, вы можете помочь мне, спасибо за ваше время!

Answer 1

Используйте $ refs для получения элемента из компонента и querySelector для получения активного.

const tag = this.$refs.tagbox.querySelector('.active').innerText

axios.post('http://localhost:4000/articles', {
   title: this.title,
   description: this.description,
   tag
 })

<div ref='tagbox' class="tag-box">
     <div class="tag">Tag 1</div>
     <div class="tag active">Tag 2</div>
</div>