0xD34F

$('.payment-innovation .item').css('opacity', 0);

$('.payment-innovation .list-block__head').click(function() {
  const $this = $(this);
  const $items = $this.closest('.list-block').find('.item');
  const visible = $this.toggleClass('visible').hasClass('visible');
  const duration = 400;

  $items.each((i, n) => $(n)
    .delay((visible ? i : $items.length - i - 1) * duration)
    .animate({ opacity: +visible }, duration)
  );
}).click();

Не повторяются.

Поскольку управление отображением всех диалогов завязано на одно и то же свойство (v-model="dialog_destroy"), то при открытии любого из них открываются все и вы всегда видите только последний - он скрывает собой остальные.

Пусть видимостью диалогов управляют разные свойства:

data: () => ({
  showDialog: {},
  ...
}),

<v-dialog v-model="showDialog[item.свойствоИмеющееУникальныеЗначенияДляКаждогоItem]">

<v-btn @click="showDialog[item.свойствоИмеющееУникальныеЗначенияДляКаждогоItem] = false">Отменить

Можно и без дополнительного объекта обойтись, хранить информацию о состоянии диалога среди прочих данных:

<v-dialog v-model="item.showDialog">

<v-btn @click="item.showDialog = false">Отменить

Также можно вынести шаблон диалогового окна за пределы таблицы, чтобы оно было одно на всех:

data: () => ({
  dialogData: null,
  ...
}),

<v-data-table>
  <template #item.action="{ item }">
    <v-btn @click="dialogData = item">Удалить контакт</v-btn>
  </template>
</v-data-table>

<v-dialog :value="!!dialogData" @input="dialogData = $event">
  <span>Удалить контакт: @{{ dialogData?.contact_name }}</span>
  <v-btn :href="dialogData?.destroy_link">Подтвердить</v-btn>
  <v-btn @click="dialogData = null">Отменить</v-btn>
</v-dialog>

Сделайте компонент функциональным, там классы (как и прочие атрибуты) не цепляются автоматически к корню, можно самостоятельно выбирать, кому их следует добавить:

functional: true,
render(h, ctx) {
  return h('div', {
    class: 'col-12',
  }, [
    h('input', {
      class: [ ctx.data.class, ctx.data.staticClass ],
    }),
  ]);
},

svgElem.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', '0 0 50 50')

Или пусть создание элемента выглядит так:

document.createElementNS('http://www.w3.org/2000/svg', 'svg')

array_filter($arr1, fn($n) => in_array($n['name'], $arr2))

Safari не поддерживает lookbehind.

const utm = Object.fromEntries(Array.from(
  location.search.matchAll(/utm_(.+?)=([^&]*)/g),
  n => n.slice(1)
));

// или

const utm = [...new URLSearchParams(location.search)].reduce((acc, n) => (
  n[0].startsWith('utm_') && (acc[n[0].slice(4)] = n[1]),
  acc
), {});

keys = [ 'to_user', 'from_user' ]

values = [ n[k] for n in log for k in keys ]

Чтобы ответить на этот вопрос, достаточно подумать над тем, как будет выглядеть подключение ещё одного обработчика в каждом из представленных случаев.

sex: bool,
fired: bool

Что такое bool? Исправляйте:

sex: null,
fired: false

console.log(this.state.fired.checked);

Это ещё что за на хрен? Свойство checked есть у элемента, но не у значения в стейте. Просто fired.

Радиокнопки - задать value, убрать id, поместить внутрь label'ов (у них, соответственно, убрать for). Ну и сам тэг input, он непарный. Так что закрывающие тэги убрать, в конец открывающих добавить слеш.

Обработчик onChange пусть выглядит так:

changeInputHandler = ({ target: t }) => {
  this.setState(() => ({
    [t.name]: t.type === 'checkbox' ? t.checked : t.value,
  }));
}

В родительском компоненте:

const [ active, setActive ] = useState(null);

{items.map((n, i) => (
  <FirstWindowItems
    item={n}
    isActive={active === i}
    onClick={() => setActive(i)}
  />
))}

В FirstWindowItems:

function FirstWindowItems({ item, isActive, onClick }) {
  return (
    <div className={`window__items ${isActive ? 'active' : ''}`} onClick={onClick}>
      ...

.window__items.active {
  здесь стили для активного элемента
}

Встречный вопрос: как нужные вам данные попали туда, откуда вы собираетесь их "получать"? Ничего делать не надо, всё уже есть - работайте внутри handleClick с объектом item.

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

const $slider1 = $('.slider-nav').slick({
  ...
}).on('beforeChange', function(e, slick, currSlide, nextSlide) {
  $slider2.slick('slickGoTo', nextSlide + 1);
});

const $slider2 = $('.slider-for').slick({
  ...
}).on('beforeChange', function(e, slick, currSlide, nextSlide) {
  $slider1.slick('slickGoTo', nextSlide - 1);
});

Заменить объект на новый:

const index = arr.findIndex(n => n.id === newObj.id);
arr[index === -1 ? arr.length : index] = newObj;

Обновить существующий объект:

const obj = arr.find(n => n.id === newObj.id);
if (obj) {
  Object.assign(obj, newObj);
} else {
  arr.push(newObj);
}

stuff.map(n => `${n.firstName} ${n.lastName}`).sort((a, b) => a.localeCompare(b))

indexes.reduce((p, c) => (p?.child ?? p)?.[c], main)

`${value % 100}`.padStart(2, 0)

или

String(value).match(/..?$/)[0]

или

('' + value).replace(/.+(?=..)/, '')

или

''.concat(value).split(/(?=.{2})/).pop()

$('селектор родительских элементов инпутов')
  .last()
  .clone()
  .find('input')
  .attr('name', (i, name) => name.replace(/(?<=\[)\d+(?=\])/, m => +m + 1))
  .end()
  .appendTo('кому-то там добавляется, сами разберётесь кому');

https://jsfiddle.net/43kv5pwj/

UPD. Вынесено из комментариев:

На IOS не работает (safari)

name.replace(/\[(\d+)\]/, (m, g1) => `[${+g1 + 1}]`)

const groupedPosts = Object.values(data.reduce((acc, n) => (
  (acc[n.id] ??= []).push(n),
  acc
), {}));

const button = document.querySelector('button');
button.addEventListener('click', showPosts);

const SHOW_POSTS_GROUPS = 2;
for (let i = 0; i < SHOW_POSTS_GROUPS; i++) {
  showPosts();
}

function showPosts() {
  const posts = groupedPosts.shift();
  if (posts) {
    const html = `<ul>${posts.map(n => `<li>${n.name}</li>`).join('')}</ul>`;
    document.querySelector('.card__wrap').insertAdjacentHTML('beforeend', html);
    button.disabled = !groupedPosts.length;
  }
}

const interval = [ 0, 150 ];

const $slider = $('#storlekslider').slider({
  range: 'max',
  min: interval[0],
  max: interval[1],
  step: 1,
  slide: (e, ui) => update(ui.value),
});

const $input = $('#storlek_testet').on('input', e => update(e.target.value));

$('button').click(e => update(+$input.val() + 50 * ($(e.target).text() === '+' ? 1 : -1)));


function update(val) {
  val = Math.max(interval[0], Math.min(interval[1], val));
  $input.val(val);
  $slider.slider('value', val).find('.ui-slider-handle').text(val);
}

mounted() {
  this.$el.querySelectorAll('input').forEach(n => n.dispatchEvent(new Event('input')));
},

jsfiddle.net/whrgboxs