переключение класса у элементов по клику vue

Question

есть массив с тегами. Нужно по клику переключать сlass active. При этом, если мы нажимаем на тег, у которого класс active - он должен пропадать. У меня получилось сделать перекдючение между тегами, но не получается убирать активный класс при втором нажатии на тег.

HTML 
            <div class="tags flex-wrap" v-if="tags">
        <span v-for="(tag, index) of tags" 
            :key="`${tag.id}`"
            :class="['mb-10', {'active': activeIndex === index}]"
            @click="activeIndex == index ? activeIndex : index">
                {{tag.name)}}
        </span>
    </div>]
    
    JS 
    export default {
name: "tag",
components: {},
props: {
},
data() {
    return {
        activeIndex: null,
        tags: [
            {id: 1, name: "lemon"},
            {id: 3, name: "apple"},
            {id: 4, name: "pear"},
            {id: 5, name: "orange"},
    ],
    }
},
}
    
    SCSS 
     .tags {
    span {
        font: normal 10px os;
        color: $darkBlue;
        background: $lightGreyBorder;
        border-radius: 14px;
        padding: 5px 20px;
        cursor: pointer;
        transition: none;
        margin-right: 20px;
        display: inline-block;


        &.active {
            color: $white;
            background: $darkBlueHover;
            pointer-events: none;
        }
    }
}

Answer 1

Вот так будет работать. Посмотрите что у вас в "клике" - там вообще какая-то чушь написана.

var app = new Vue({
  el: '#app',
  data() {
    return {
      activeIndex: null,
      tags: [{
          id: 1,
          name: "lemon"
        },
        {
          id: 3,
          name: "apple"
        },
        {
          id: 4,
          name: "pear"
        },
        {
          id: 5,
          name: "orange"
        },
      ],
    }
  },
})

span {
 background-color: red;
 user-select: none; 
}

.active {
 background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="tags flex-wrap" v-if="tags">
    <span
      v-for="(tag, index) of tags"
      @click="activeIndex = (activeIndex === index) ? null : index"
      :key="tag.id"
      :class="(activeIndex === index) ? 'active' : ''"
    >
      {{tag.name}}
    </span>
  </div>
</div>

БЛОГ НА HUSL

переключение класса у элементов по клику vue

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