如果属性等于值，则获取列表中的第一个元素-VUE.js

Question

如果属性等于值，我正在尝试向第一div添加一个类。

我有：

<div class="list">
    <div class="list__item" title="attr1">value 1</div>
    <div class="list__item"  title="attr1">value 2</div>
    <div class="list__item"  title="attr2">value 3</div>
    <div class="list__item"  title="attr2">value 4</div>
    <div class="list__item"  title="attr2">value 5</div>
    <div class="list__item"  title="attr2">value 6</div>
    <div class="list__item"  title="attr2">value 7</div>
</div>

我想要实现的是：

我有：

<div class="list">
    <div class="list__item" title="attr1" class="active">value 1</div>
    <div class="list__item"  title="attr1">value 2</div>
    <div class="list__item"  title="attr1">value 3</div>
    <div class="list__item"  title="attr2" class="active">value 3</div>
    <div class="list__item"  title="attr2">value 4</div>
    <div class="list__item"  title="attr2">value 5</div>
    <div class="list__item"  title="attr2">value 6</div>
</div>

我的代码：

const tags = ['attr1', 'attr2']

const collection = document.getElementByClassName("list__item")

// convert colelction into array
const arr = [...collection]

arr.forEach(el => {
    this.tags.forEach(tag => {
        if(tag == el.attributes.attr1.value) {
            document.querySelector(".list__item").classList.add('active')
        }
    })
})

我得到的是：

<div class="list">
    <div class="list__item" title="attr1" class="active">value 1</div>
    <div class="list__item"  title="attr1">value 2</div>
    <div class="list__item"  title="attr1">value 3</div>
    <div class="list__item"  title="attr2">value 3</div>
    <div class="list__item"  title="attr2">value 4</div>
    <div class="list__item"  title="attr2">value 5</div>
    <div class="list__item"  title="attr2">value 6</div>
</div>

问题是，对于第一次迭代，它没有使用attr2将类添加到第一个div中>

如果属性等于值，我正在尝试向第一个div添加一个类。我拥有的是：

值1

Answer 1

您应该遍历标签。对于每个标签，搜索title等于标签的元素。找到第一个标签后，您将停止该特定标签，然后继续下一个标签。

Answer 2