0xD34F

Добавляете в компонент свойство, которое будет указывать, случалось ли ваше событие. Если его значение false, тогда ничего не делаете, по умолчанию будет отрендерен чекбокс, если true - передаёте в соответствующий слот что там вам надо:

data: () => ({
  событиеНаступило: false,
  ...
}),

@событие="событиеНаступило = true"

<v-data-table>
  <template v-if="событиеНаступило" #item.data-table-select>
    здесь размещаете контент, который должен отображаться вместо чекбоксов
  </template>
  ...

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

<v-data-table>
  <template #item.data-table-select="{ item, isSelected, select }">
    <div v-if="item.событиеНаступило">hello, world!!</div>
    <v-simple-checkbox
      v-else
      :value="isSelected"
      @input="select($event)"
    ></v-simple-checkbox>
  </template>
  ...

Собрать новый массив:

const count = arr.reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});
const newArr = arr.map(n => count[n] > 1 ? newValue : n);

// или

const newArr = arr.map(function(n) {
  return this.get(n) ? newValue : n;
}, arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map));

// или

const newArr = arr.map((n, i, a) => a.indexOf(n) !== a.lastIndexOf(n) ? newValue : n);

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

arr.forEach(function(n, i, a) {
  a[i] = this.get(n) > 1 ? newValue : n;
}, arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map));

// или

const duplicates = arr.reduce((acc, n) => (acc[n] = acc.hasOwnProperty(n), acc), {});
arr.splice(0, arr.length, ...arr.map(n => duplicates[n] ? newValue : n));

// или

Object
  .values(arr.reduce((acc, n, i) => ((acc[n] ??= []).push(i), acc), {}))
  .forEach(n => n.length > 1 && n.forEach(i => arr[i] = newValue));

$('.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);
if (index !== -1) {
  arr[index] = newObj;
} else {
  arr.push(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;
  }
}