Как сделать выбор/переключение между элементами на Vue.JS?

Question

Мне нужно сделать переключение между элементами на VueJS. Я пытался сделать это сам, но у меня не получилось. Получилось сделать это только на JavaScript. Вот что получилось у меня на JS:

const img = document.querySelectorAll('.img');
const img_activate = (e) => {
  img.forEach(function(el) {
    el.classList.remove('img_active');
  });
  t = event.target;
  t.classList.add('img_active');
}

for (i = 0; i < img.length; i++) {
  img[i].addEventListener('click', img_activate);
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.img {
  width: 100px;
  height: 100px;
  background-color: green;
}

.app {
  display: flex;
  width: 600px;
  justify-content: space-between;
  position: relative;
}

.img_active {
  transform: scale(1.5);
}

<div class="app">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

Answer 1

Если ты рисуешь картинки из массива, то возможно вот такой вариант:

<div id="#app">
  <div class="app">
     <div class="img" :class="{'img_active': item.isActive}" v-for="item in items" :key="item.id" @click="setActive(item.id)"> </div>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      {
        id: 1,
        isActive: true
      },
      {
        id: 2,
        isActive: false
      },
      {
        id: 3,
        isActive: false
      }
    ]
  },
  methods: {
    setActive (id) {
      this.items = this.items.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            isActive: true
          }
        }else{
          return {
            ...item,
            isActive: false
          }
        }
      });
   }
  }
});

БЛОГ НА HUSL

Как сделать выбор/переключение между элементами на Vue.JS?

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