Сравнить два массива и добавить класс Vue js

Question

Есть два массива, нужно их сравнить и при каждом совпадении добавлять определенному элементу класс:

Первый массив

skills: ['Validator', 'Pitch trainer', 'Organizer', 'Coach', 'Facilitator', 'LCA expert'],

Второй массив

annotations: ['Validator', 'Coach'],

<div class="skill__row" v-for="(skill, index) in skills" :key="index" :class="(trainer.annotations[index] == skill) && 'active'">
    <div class="skill__checkbox"></div>
    <p class="skill__text body-3">{{ skill }}</p>
</div>

Нужно сделать так чтобы при совпадении добавляло класс нужному skill__row

Answer 1

Jsfiddle

new Vue({
    el: "#app",
    data: {
        skills: [
            'Validator',
            'Pitch trainer',
            'Organizer',
            'Coach',
            'Facilitator',
            'LCA expert'
        ],
        annotations: [
            'Validator',
            'Coach'
        ],
    },
    methods: {
        findMatch(skill) {
            return this.annotations.includes(skill);
        }
    }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

.skills .skill__row {
    color: #ccc;
}

.skills .skill__row--active {
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div class="skills">
        <div
            v-for="(skill, index) in skills"
            :key="index"
            class="skill__row"
            :class="{ 'skill__row--active': findMatch(skill) }"
        >
            {{ skill }}
        </div>
    </div>
</div>

Answer 2

Так же можно создать промежуточный вычисляемый массив skills в котором уже будет пройдена проверка на совпадения, а в шаблоне остается только проверить значение в объекте.

new Vue({
    el: "#app",
    data: {
        skills: [
            'Validator',
            'Pitch trainer',
            'Organizer',
            'Coach',
            'Facilitator',
            'LCA expert'
        ],
        annotations: [
            'Validator',
            'Coach'
        ],
    },
    computed: {
        skillsWithAnnotations() {
            return this.skills.map((skill, index) => ({
                id: index,
                active: this.annotations.includes(skill),
                name: skill
            }));
        }
    }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

.skills .skill__row {
  color: #ccc;
}

.skills .skill__row--active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div class="skills">
        <div
            v-for="skill in skillsWithAnnotations"
            :key="skill.id"
            class="skill__row"
            :class="{ 'skill__row--active': skill.active }"
        >
          {{ skill.name }}
        </div>
    </div>
</div>

БЛОГ НА HUSL

Сравнить два массива и добавить класс Vue js

Ответы (2 шт):