0xD34F

const result = Array.prototype.flatMap.call(
  document.forms,
  function(form) {
    return form.className.match(this) ?? [];
  },
  /(?<=(^| )js-)[a-z-]*(?=-form( |$))/g
);

или

const result = [];
const reg = /^js-([a-z-]*)-form$/;

for (const form of document.querySelectorAll('form')) {
  for (const cls of form.classList) {
    const name = reg.exec(cls)?.[1];
    if (name != null) {
      result.push(name);
    }
  }
}

$('#cityFilter').on('input', function() {
  const value = this.value.toLowerCase();

  $('#city-list .city')
    .hide()
    .filter((i, n) => $(n).text().toLowerCase().includes(value))
    .show();

  $('#city-list .state')
    .hide()
    .filter((i, n) => $(n).nextUntil('.state').is(':visible'))
    .show();
});

или

document.querySelector('#cityFilter').addEventListener('input', e => {
  const value = e.target.value.toLowerCase();

  document.querySelectorAll('#city-list li').forEach(function(n) {
    if (n.matches('.state')) {
      this.splice(0, 2, n, true);
    } else {
      const hide = n.textContent.toLowerCase().indexOf(value) === -1;
      this[1] &&= hide;
      n.classList.toggle('hidden', hide);
      if (!n.nextElementSibling?.matches('.city')) {
        this[0].classList.toggle('hidden', this[1]);
      }
    }
  }, [ null, true ]);
});

document.querySelectorAll('.col').forEach(n => {
  n.querySelectorAll('a').forEach((m, i) => m.classList.toggle('d-none', !!i));
});

или (если перед первыми ссылками других элементов нет, и сами ссылки ни во что дополнительно не обёрнуты)

document.querySelectorAll('.col a').forEach(n => {
  n.classList.toggle('d-none', !!n.previousElementSibling);
});

Хранить сообщения как массив объектов. В объекте сообщения должно быть свойство - id таймаута на удаление.

Сделать методы для установки и удаления таймаута (в качестве параметра принимают объект сообщения):

methods: {
  setDeleteTimeout(message) {
    message.timeout = setTimeout(this.удалитьСообщение, 5000, message);
  },
  delDeleteTimeout(message) {
    clearTimeout(message.timeout);
    message.timeout = null;
  },
  ...

Использовать эти методы для обработки событий mouseenter/mouseleave:

<div
  v-for="n in messages"
  @mouseenter="delDeleteTimeout(n)"
  @mouseleave="setDeleteTimeout(n)"
  ...

Ну и при создании объекта сообщения для него надо будет setDeleteTimeout вызвать.

https://jsfiddle.net/n2bp3yvh/2/

^(\d{5}){1,2}$

const getFisrtPromises = (promises, count) =>
  new Promise(resolve => {
    const results = [];

    const onResolve = result =>
      results.length < count &&
      [ count, promises.length ].includes(results.push(result)) &&
      resolve(results);

    promises.forEach(n => n.then(onResolve));
  });

const filterSelector = '.js-filter';
const itemSelector = '.dfth__item';
const checkboxSelector = '.dfth__check:checked';
const labelSelector = '.dfth__label';
const resetSelector = '.dfth__reset';
const selectedSelector = '.js-type-result';
const defaultValue = 'ничего не выбрано';

Вот jquery:

const $filter = $(filterSelector).change(function() {
  const selected = $(checkboxSelector, this)
    .closest(itemSelector)
    .find(labelSelector)
    .get()
    .map(n => $(n).text())
    .join(', ');

  $(selectedSelector, this).text(selected || defaultValue);
});

$filter.find(resetSelector).click(() => {
  $filter.find(checkboxSelector).prop('checked', false);
  $filter.trigger('change');
});

А вот jquery нет:

const filter = document.querySelector(filterSelector);

filter.addEventListener('change', ({ currentTarget: ct }) => {
  const selected = Array
    .from(
      ct.querySelectorAll(checkboxSelector),
      n => n.closest(itemSelector).querySelector(labelSelector).textContent)
    .join(', ');

  ct.querySelector(selectedSelector).textContent = selected || defaultValue;
});

filter.querySelector(resetSelector).addEventListener('click', () => {
  filter.querySelectorAll(checkboxSelector).forEach(n => n.checked = false);
  filter.dispatchEvent(new Event('change'));
});

list(map(list, zip(*arr)))

разберитесь с используемой версией vue

Проверяем факт наличия дубликатов:

const hasDuplicates = map.size > new Set(Array.from(map, n => n[1].id)).size;

Смотрим, кто конкретно повторяется:

const duplicates = Array
  .from([...map].reduce((acc, [ , { id } ]) => acc.set(id, acc.has(id)), new Map))
  .reduce((acc, n) => (n[1] && acc.push(n[0]), acc), []);

Вычисляем, кто сколько раз представлен в исходных данных:

const count = Array
  .from(map.values())
  .reduce((acc, { id }) => acc.set(id, -~acc.get(id)), new Map);

Сделать markSlider из обычного свойства вычисляемым:

computed: {
  markSlider() {
    switch (this.selectedCoin) {
      case 'BTC': return что-то одно;
      case 'ETH': return что-то другое;

      default: return null;
    }
  },
  ...

если я ставлю параметр :interval="100", то у меня появляется черная полоса под слайдером и все начинает очень лагать

Разница между максимальным и минимальным доступными значениями 150000. Делим на 100, получаем 1500. Это количество отметок под слайдером. Ширина экрана в пикселях имеет тот же порядок - естественно, все эти 100, 200, ... наслаиваются друг на друга до степени абсолютной неразличимости - отсюда "черная полоса".

Сами отметки представлены тремя div'ами каждая. Изменили значение с 1000 на 10000, например - надо переназначить классы (с последующей перерисовкой) у 27000 элементов. Как думаете, может ли это быть причиной вашего "очень лагать"?

Что делать? - рисовать меньше отметок. Скажем, одну через каждые двадцать тысяч:

methods: {
  marks: v => !(v % 20000),
  ...

<vue-slider
  :marks="marks"
  ...

Где элементы находятся, что за элементы, какой класс у них надо переключать:

const containerSelector = '.block-btn';
const itemSelector = `${containerSelector} [data-cost]`;
const activeClass = 'active';

Какие тут возможны варианты:

Обработчик клика назначается каждому элементу индивидуально. Перебираем всех соседей (чтобы их получить, надо подняться к контейнеру и внутри него выполнить поиск нужных элементов), переключаем класс в зависимости от равенства текущего и кликнутого элемента:

const onClick = ({ currentTarget: t }) => t
  .closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(n => n.classList.toggle(activeClass, n === t));

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

Делегированный обработчик клика назначается контейнерам. Проверяем, что кликнут был интересующий нас элемент (пробуем до него подняться от элемента, на котором случилось событие). Если да, ищем внутри контейнера активный элемент, снимаем класс. Кликнутому элементу класс добавляем:

for (const n of document.querySelectorAll(containerSelector)) {
  n.addEventListener('click', onClick);
}

function onClick(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    this.querySelector(`.${activeClass}`)?.classList.remove(activeClass);
    item.classList.add(activeClass);
  }
}

Делегированный обработчик для всей страницы. От элемента, где случился клик, поднимаемся до элемента, которому должен быть назначен класс, если таковой нашёлся, получаем также и его соседей, перебираем их, переключаем класс в зависимости от наличия внутри элемента, где случился клик:

document.addEventListener('click', ({ target: t }) => t
  .closest(itemSelector)
  ?.closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(n => n.classList.toggle(activeClass, n.contains(t)))
);

Храните значения, отвечающие за цвет текста, в родительском компоненте, можно вместе с остальными данными:

const [ items, setItems ] = useState([
  { id: ..., text: '...', active: false },
  { id: ..., text: '...', active: false },
  ...
]);

Тогда сброс этих значений оказывается делом тривиальным:

const reset = () => setItems(items.map(n => ({ ...n, active: false })));

<button onClick={reset}>reset</button>

Ну а переключение значений изнутри экземпляров компонента Text придётся переписать. Сделаем функцию, которая принимает id, и изменяет соответствующий элемент:

const toggle = id => setItems(items.map(n => n.id === id ? { ...n, active: !n.active } : n));

Передадим эту функцию в экземпляры компонента Text:

{items.map(n => <Text key={n.id} {...n} toggle={toggle} />)}

Назначим её в качестве обработчика клика:

const Text = ({ id, text, active, toggle }) => (
  <p
    className={active ? 'active' : ''}
    onClick={() => toggle(id)}
  >
    {text}
  </p>
);

Всё.

let linkIndex = link.dataset.first;
<...>
mySwiper.slideToLoop(linkIndex);

Значения какого типа содержаться в dataset? Строки. А индекс - это что? Число. Ну так сделайте из строки число.

Самый простой способ - перенести вызов setIsDeleted из finally в catch.

Понимаю, что это как-то связано с преждевременным размонтированием компонента перед завершением api запроса.

Не связано. Запрос успешно завершается, удаляется элемент данных, соответствующий ему экземпляр компонента тоже долой - и уже после этого вы пытаетесь обновить состояние экземпляра компонента. А зачем? Не всё ли равно, как он будет выглядеть, если его уже нет?

print('\n'.join(f'{i}. {n}' for i, n in enumerate(arr, 1)))

я так понимаю - это называется label

не понимаете

Соответствующую настройку просили добавить, но безрезультатно. Так что придётся закостылить.

Добавляем ссылку на компонент графика:

<apexchart
  ref="chart"
  ...

После монтирования скрываем лишнее:

mounted() {
  this.$nextTick(() => {
    this.$refs.chart.hideSeries('здесь имя набора данных, который не хотите показывать');
  });
},