0xD34F

1. Убрать:
   
   

   data() {
     return {
       isChecked: false,
     }
   },
   methods: {
     toggleSwitch() {
       this.isChecked = !this.isChecked
       this.$emit('input', this.isChecked)
     },
   },

   
   
   
2. Добавить:
   
   

   props: {
     value: Boolean,
   },

   
   
   
3. Заменить:
   
   

   - :class="{ 'ivu-switch-checked': isChecked }"
   + :class="{ 'ivu-switch-checked': value }"

   
   

   - @click.prevent="toggleSwitch"
   + @click.prevent="$emit('input', !value)"

   
   
   

Потому что кто-то невнимательно читал документацию.

UPD. Как-то сразу не догадался глянуть js-код. А там, а там... ЭТО ЧТО ЕЩЁ ЗА НА ХРЕН:

elem.classList.add('check');
elem.querySelector('input[type="checkbox"]').remove();

??

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

UPD. Как может выглядеть исправленный (и дополненный - редактирование теперь тоже есть) вариант вашего кода:

data: () => ({
  tasks: [],
  taskId: 0,
  newTaskText: '',
}),
methods: {
  addTask() {
    this.tasks.push({
      id: ++this.taskId,
      text: this.newTaskText,
      done: false,
      edit: false,
    });

    this.newTaskText = '';
  },
},

<ul>
  <li v-for="(n, i) in tasks" :key="n.id" :class="{ check: n.done }" @dblclick="n.edit = !n.done">
    <input type="checkbox" v-if="!n.done" v-model="n.done">
    <input type="text" v-if="!n.done && n.edit" v-model="n.text" @keyup.enter="n.edit = false">
    <template v-else>{{ n.text }}</template>
    <input type="button" class="del" value="+" @click="tasks.splice(i, 1)">
  </li>
</ul>
<input type="text" v-model="newTaskText" @keyup.enter="addTask">

const data = Array.prototype.reduce.call(
  document.querySelector('form').elements,
  (acc, { name, value }) => (
    name.match(/\w+/g).reduce((p, c, i, a) =>
      p[c] ??= (-~i < a.length ? {} : value)
    , acc),
    acc
  ),
  {}
);

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

Для

<input type="text" name="iuowye[rrr][]" value="1">
<input type="text" name="iuowye[rrr][]" value="2">
<input type="text" name="iuowye[rrr][]" value="3">

работать не будет.

const data = Array
  .from(document.querySelectorAll('form [name]'))
  .reduce((acc, n) => {
    const keys = n.name.match(/\w+|\[\w*\]/g).map(n => n.replace(/^\[|\]$/g, ''));
    const key = keys.pop();
    const isArr = !key;
    const values = keys.reduce((p, c, i, a) => {
      return p[c] ??= (i === a.length - 1 && isArr ? [] : {});
    }, acc);
    values[isArr ? values.length : key] = n.value;
    return acc;
  }, {});

Ау, документацию для кого сделали?

setValue(value === e.target.value);

Лишнее: value ===.

Ну и ограничений не хватает, так что:

setValue(Math.min(max, Math.max(min, e.target.value)));

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

Хотел реализовать тоже самое с двойным range слайдером и оказалось несколько сложнее.

Ничего сложного.

function sum(...v1) {
  const s = v1.reduce((acc, n) => acc + n, 0);
  const f = (...v2) => v2.length ? sum(...v2, s) : s;
  return v1.length ? f : s;
}

const groupValues = (arr, defaultValue = null) =>
  arr.reduce((acc, n, i, a) => (
    Object.entries(n).forEach(([ k, v ]) =>
      (acc[k] ??= Array(a.length).fill(defaultValue))[i] = v
    ),
    acc
  ), {});


const result = groupValues(arr, 0);

Вам вообще не надо вызывать эту функцию, если только вы не скрываете задачу, которая стоит перед вами на самом деле. Вы уже применили map - он как раз "для каждого элемента списка".

Если нужен индекс - он в коллбек map'a передаётся вторым параметром:

{cats.map((cat, index) => (
  <li key={cat.description} className="catsItem">
    <img src={catsImg[index]} alt=""/>
    ...

const selector = '.text';
const regex = /@(\w+)/g;
const replacement = '<a href="https://site.com/$1">$&</a>';
const replace = str => str.replace(regex, replacement);

$(selector).html((i, html) => replace(html));

// или

document.querySelectorAll(selector).forEach(n => {
  n.innerHTML = replace(n.innerText);
});

lower = next((n for n in reversed(lst) if n <= num), float('-inf'))
upper = next((n for n in lst if n >= num), float('inf'))

print([ lower, upper ])

Потому что вы не видите разницы между функцией и результатом её вызова.

Добавьте () => перед openLightboxOnSlide(key) (кстати, а какого хрена переменная, содержащая индекс, названа key?).

Но вообще, дополнительный метод не нужен. И объект хранить в lightIndex не надо. Пусть индекс принимает по умолчанию значение, которое не может быть корректным индексом (например null, или -1) - это будет означать, что показывать ничего не надо:

const [ lightIndex, setLightIndex ] = useState(null);

<img onClick={() => setLightIndex(key)} />

<ReactBnbGallery
  photos={photos}
  show={lightIndex !== null}
  activePhotoIndex={lightIndex}
  onClose={() => setLightIndex(null)}
/>

const urls = [ '...', '...', ... ];

Promise
  .all(urls.map(n => fetch(n).then(r => r.json())))
  .then(обработатьРезультаты)
  .catch(err => console.error(err));

function обработатьРезультаты(results) {
  ...
}

return [...el].map((n) => new Select(n));

Здесь всегда возвращается массив экземпляров базового класса.
А надо текущего - замените Select на this.constructor.

Object.values(city.reduce(
  (acc, n) => (acc[n.idMain]?.push(n), acc),
  Object.fromEntries(grop.map(n => [ n.idParent, [ n ] ]))
)).flat()

или

grop.flatMap(n => [ n, ...city.filter(m => m.idMain === n.idParent) ])

$grouped = [];

foreach ($arr as $n) {
  $grouped[$n['city']][] = $n;
}

Всё настолько плохо, что исправлять нечего. Можно переписать с нуля:

const checkedTexts = (el, selector) =>
  Array.from(el.querySelectorAll(`${selector}:checked`), n => n.parentNode.innerText);

const propertyText = (el, selector) =>
  el.querySelector(selector).innerText.split(': ')[1];

document.querySelector('.container-filter').addEventListener('input', function() {
  const maxPrice = parseInt(this.querySelector('.range').value);
  const brands = checkedTexts(this, '.input');
  const years = checkedTexts(this, '.input-date');

  document.querySelectorAll('.device .laptop').forEach(n => {
    const price = parseInt(propertyText(n, '.laptop-price'));
    const brand = propertyText(n, '.laptop-name');
    const year = propertyText(n, '.laptop-year');

    n.style.display = (
      (maxPrice >= price) &&
      (!brands.length || brands.includes(brand)) &&
      (!years.length || years.includes(year))
    )
      ? 'block'
      : 'none';
  });
});

Говнокод тот ещё получается - но тут уж таков исходный материал.

Вам стоит рассмотреть вариант с хранением информации о товарах в массиве, чтобы не приходилось выдирать её из разметки. Как оно могло бы быть.

const newStr = str
  .split(' ')
  .map(function([...word]) {
    const sorted = word.filter(this).sort((a, b) => b.localeCompare(a));
    return word.map(n => this(n) ? sorted.pop() : n).join('');
  }, RegExp.prototype.test.bind(/[a-z]/i))
  .join(' ');

str.replace(/(\d{2})(\d{2})/, '$1.$2.')
// или
str.replace(/(?=\d{4}$|\d{6}$)/g, '.')
// или
str.match(/(..)(..)(.+)/).slice(1).join('.')
// или
[ 0, 2, 4 ].map((n, i, a) => str.slice(n, a[i + 1])).join`.`
// или
[...str].reduce((acc, n, i) => acc + n + ([ ,'.',,'.' ][i] || ''))
// или
''.concat(...Array.from(str, (n, i) => '24'.includes(i) ? `.${n}` : n))

props.component || <a/>

props.component || 'a'