Как отследить повторный клик по элементу?

Question

[dmitry2000]

У меня есть n-количество элементов, например <div @click="click(items)"></div>
куда я передаю некие данные, строку, объект, массив или другое. В методе click я обрабатываю данные и на основе их делаю логику

click(items) {
let newNodes = Object.keys(this.nodes)
                .filter(el => items.includes(el))
                .reduce((obj, key) => {
                    obj[key] = this.nodes[key];
                    return obj;
                }, {});
for (let node in this.nodes) {
                this.nodes[node].style.opacity = 0.3;
            }

            for (let node in newNodes) {
                this.nodes[node].style.opacity = 1;
            }
}

this.nodesэто набор элементов svg на странице. На вход я получаю массив неких элементов, какие нужно оставить с opacity: 1, а другие сделать opacity: 0.3. Когда я нажимаю на разные элементы <div @click="click(items)"></div> всё ок, но если нажать повторно на один и тот же, мне нужно, чтобы все возвращалось на прежние места, т.е. opacity: 1 было бы у всех нод. Я это делаю при помощи, если входной массив равен предыдущему, то делай все элементы opacity: 1. Но, еще раз если кликнуть по той же кнопке <div @click="click(items)"></div>, то логика ломается. Я что только не перепробовал. Как грамотно с этим работать? Может быть как-то можно добавить состояние каждой кнопке

Answer 1

[Николай]

Проблема в том, что вам нужно отслеживать состояние конкретной кнопки, а не только предыдущий массив.

Примерно, как-то так будет

data() {
  return {
    activeItems: [],
    lastClickedId: null
  }
},

methods: {
  click(items, buttonId) {
    const itemsArray = Array.isArray(items) ? items : [items];
    
    // Если кликаем второй раз по той же кнопке
    if (this.lastClickedId === buttonId) {
      this.activeItems = [];
      this.lastClickedId = null;
    } else {
      this.activeItems = itemsArray;
      this.lastClickedId = buttonId;
    }
    
    this.applyStyles();
  },
  
  applyStyles() {
    for (let node in this.nodes) {
      this.nodes[node].style.opacity = this.activeItems.includes(node) ? 1 : 0.3;
    }
  }
}



В коде при событии клик, передавай и id   @click="click(button.items, button.id)" - который как раз является индексом