У меня есть 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>
, то логика ломается. Я что только не перепробовал. Как грамотно с этим работать? Может быть как-то можно добавить состояние каждой кнопке