获取所选类vuejs的值

Question

我很难尝试通过活动类传递div的值。用户可以选择任何标签，并使其激活。一次只能激活一个标记。

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

我想获得具有活动类的值并使用axios返回此值

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>