VUE Как при клике добавлять класс всем эл., кроме элементу на который нажали

Question

VUE Доброго времени суток. Возникла проблема, как задать класс при клике всем элементам в массиве, кроме элемента на который нажали? Н данный момент получается только так. Но с начало они не должны быть выделены, только после клика добавляться класс

new Vue({
  el: '#app',
  data: () => {
    return {
      activeEl: false,
      items: [
        {
            content: 'hhhhh'
        },
        {
            content: 'hhhhh'
        },
        {
            content: 'hhhhh'
        },
        {
            content: 'hhhhh'
        },
        {
            content: 'hhhhh'
        }
      ]
    }
  }
})

.active {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="i in items" :key="i" class="choose_number" :class="{'active': activeEl != i}" @click="activeEl = i">Элемент {{ i.content }}</li>
  </ul>
</div>

.

Спасибо!

Answer 1

Вот так? https://jsfiddle.net/trs7ob9z/

new Vue({
  el: '#app',
  data: () => {
    return {
      activeEl: false,
      items: [
        {
            content: 'hhhhh'
        },
        {
            content: 'hhhhh'
        },
        {
            content: 'hhhhh'
        },
        {
            content: 'hhhhh'
        },
        {
            content: 'hhhhh'
        }
      ]
    }
  }
})

.active {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li 
      v-for="i in items" 
      :key="i" 
      class="choose_number" 
      :class="activeEl !== i && activeEl !== false ? 'active' : ''" 
      @click="activeEl = i"
    >
      Элемент {{ i.content }}
    </li>
  </ul>
</div>

БЛОГ НА HUSL

VUE Как при клике добавлять класс всем эл., кроме элементу на который нажали

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