0xD34F

Что я делаю не так

В сообщении об ошибке сказано.

как решить проблему?

Найти у себя в коде косяк, о котором говорится в сообщении об ошибке и исправить его (как именно исправить - в сообщении об ошибке тоже кстати сказано).

Я бы предположил, что стоит сделать следующее: { LikeIcon } ---> <LikeIcon />.

const statsMeta = [
  { title: 'отредактированные', count: item => +item.edited },
  { title: 'неотредактированные', count: item => +!item.edited },
  { title: 'всего', count: () => 1 },
];

const statsData = allMessages.reduce((acc, n) => (
  statsMeta.forEach((m, i) => acc[i] += m.count(n)),
  acc
), Array(statsMeta.length).fill(0));

console.log(statsMeta.map((n, i) => `${n.title}: ${statsData[i]}`).join('\n'));

Кого надо удалить: const classPrefix = 'modal--';

Удаляем:

Array.from(el.classList).forEach(n => el.classList.toggle(n, !!n.indexOf(classPrefix)));

или

el.classList.remove(...[...el.classList].filter(n => n.startsWith(classPrefix)));

или

for (let i = el.classList.length; i--;) {
  if (el.classList[i].search(classPrefix) === 0) {
    el.classList.remove(el.classList[i]);
  }
}

или

el.classList.value = el.classList.value
  .split(' ')
  .filter(RegExp.prototype.test.bind(RegExp(`^(?!${classPrefix})`)))
  .join(' ');

или

el.className = el.className.replace(RegExp(`(^| )${classPrefix}\\S*`, 'g'), '').trim();

const result = arr2.map(function(n) {
  return Object.fromEntries(this.map(m => [ m[1], n[m[0]] ]));
}, arr1.flatMap(Object.entries));

или

const keys = Object.entries(Object.assign({}, ...arr1));
const result = arr2.map(n => keys.reduce((acc, m) => (acc[m[1]] = n[m[0]], acc), {}));

Встречный вопрос: почему вы решили, что должно быть иначе? Код, который бы доставал данные из localStorage и клал их в todos, где он, почему его нет? Должен быть, например:

const [ todos, setTodos ] = useState(() => {
  let todos = null;

  try {
    todos = JSON.parse(localStorage.getItem('todos'));
  } catch (e) {};

  return Array.isArray(todos) ? todos : [];
});

Уверен, здесь вы ждёте, что добавляемый объект окажется в localStorage:

setTodos([
  ...todos,
  {
    id: Date.now(),
    complete: false,
    title: value,
  },
]);
localStorage.setItem("todos", JSON.stringify(todos));

Этого происходить не будет (ну, пока ещё что-то не добавите, и это "ещё что-то" тоже попадёт в localStorage не сразу). Вы не понимаете, что происходит при вызове setTodos. Откройте документацию и разберитесь. Сохранение в localStorage следует делать через useEffect:

useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(todos));
}, [ todos ]);

const xxx = str => Array
  .from(str, (n, i) => n.toUpperCase() + n.toLowerCase().repeat(i))
  .join('-');

или

const xxx = str => str
  .toUpperCase()
  .split('')
  .reduce((acc, n, i) => `${acc}${i ? '-' : ''}${n}${Array(-~i).join(n.toLowerCase())}`, '');

или

const xxx = str => str
  .toUpperCase()
  .replace(/(?<=.)./g, (m, i) => '-'.concat(m, ...Array(i).fill(m.toLowerCase())));

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

data: () => ({
  filterColumns: [
    [     'name',        'имя', 'string' ],
    [    'count', 'количество', 'number' ],
    [ 'distance', 'расстояние', 'number' ],
  ],
  operations: [
    [    'equal',    'равно' ],
    [ 'contains', 'содержит' ],
    [  'greater',   'больше' ],
    [     'less',   'меньше' ],
  ],
  ...

Тип данных указываем потому, что значения различных типов сравниваются по-разному. Кстати, определим, как именно:

data: () => ({
  types: {
    string: {
      equal: (a, b) => a.toLowerCase() === b,
      contains: (a, b) => a.toLowerCase().includes(b),
      greater: (a, b) => a.toLowerCase() > b,
      less: (a, b) => a.toLowerCase() < b,
    },
    number: {
      equal: (a, b) => a === +b,
      contains: (a, b) => `${a}`.includes(b),
      greater: (a, b) => a > +b,
      less: (a, b) => a < +b,
    },
  },
  ...

На основе описаний столбцов и способов фильтрации создадим select'ы:

<select v-model="column">
  <option v-for="n in filterColumns" :value="n[0]">{{ n[1] }}</option>
</select>
<select v-model="operation">
  <option v-for="n in operations" :value="n[0]">{{ n[1] }}</option>
</select>

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

computed: {
  filteredItems() {
    const { items, column } = this;
    const type = this.filterColumns.find(n => n[0] === column)?.[2];
    const filterFn = this.types[type]?.[this.operation];
    const filterVal = this.filterVal.toLowerCase();

    return filterFn && filterVal
      ? items.filter(n => filterFn(n[column], filterVal))
      : items;
  },
  ...

https://jsfiddle.net/8df3z1un/1/

Одного хватит. Который будет работать с вычисляемым свойством, представляющим объединённые данные.

[ arr[i + 1] / arr[i] for i in range(len(arr) - 1) ]

const hidden = (str, count = 4) => '*'.repeat(count) + str.slice(-4);

или

const hidden = (str, count = 4) => str.replace(/.*?(?=.{0,4}$)/, Array(count + 1).join('*'));

погуглил за вас

Вычитайте нижнюю границу везде, где рассчитываете проценты. Например, вместо

range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";

должно быть

range.style.left = ((minPrice - rangeInput[0].min) / (rangeInput[0].max - rangeInput[0].min) * 100) + '%';

Надо у формы слушать событие change:

const form = document.querySelector('form');
form.addEventListener('change', onChange);
form.dispatchEvent(new Event('change'));

Как может выглядеть обработчик:

function onChange() {
  this.querySelector('.result').textContent =
    Array.prototype.reduce.call(
      this.querySelectorAll(':checked'),
      (acc, n) => acc + +n.getAttribute('rel'),
      0
    );
}

или

function onChange({ currentTarget: ct }) {
  let sum = 0;

  for (const n of ct.elements) {
    sum += n.attributes.rel.value * n.checked;
  }

  ct.querySelector('.result').innerText = sum;
}

Сразу определим селекторы элементов и класс, они нам дальше понадобятся:

const blockSelector = 'селектор блоков';
const buttonSelector = 'селектор кнопок';
const activeClass = 'класс, показывающий блок';

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

const blocks = document.querySelectorAll(blockSelector);
const buttons = document.querySelectorAll(buttonSelector);

buttons.forEach((n, i) => {
  n.addEventListener('click', () => {
    blocks[i].classList.toggle(activeClass);
  });
});

Кстати, создавать отдельные обработчики клика для каждой из кнопок не обязательно, можно сделать один общий. Как при этом получать индексы? - их можно прицепить прямо к кнопкам. Например, в виде data-атрибута:

const onClick = function({ currentTarget: { dataset: { index } } }) {
  this[index].classList.toggle(activeClass);
}.bind(document.querySelectorAll(blockSelector));

document.querySelectorAll(buttonSelector).forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', onClick);
});

Также есть вариант вычислять индекс при клике:

const blocks = document.querySelectorAll(blockSelector);
const buttons = document.querySelectorAll(buttonSelector);

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(buttons, this);
  blocks[index].classList.toggle(activeClass);
}

А вообще, если у каждой из пар кнопка-блок есть отдельный общий предок (const containerSelector = '...';), то индексы не нужны. Достаточно от нажатой кнопки подняться до общего предка кнопки и блока, и найти внутри блок (а можно даже и не искать, если добавлять класс контейнеру; конечно, стили придётся в этом случае немного изменить, вместо .блок.класс будет .контейнер.класс .блок):

const toggleBlock = button => button
  ?.closest(containerSelector)
  ?.querySelector(blockSelector)
  .classList
  .toggle(activeClass);


// можно добавить обработчик клика каждой кнопке индивидуально
document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggleBlock(e.currentTarget));

// или один раз на всю страницу
document.addEventListener('click', e => {
  toggleBlock(e.target.closest(buttonSelector));
});

<card-item :title="Неработающий заголовок"/>

Понятно. Давайте посмотрим, что относительно назначения директивы v-bind говорит документация:

Динамически связывает атрибуты тега или входной параметр компонента с выражением.

Вопрос вам: почему вы решили, будто Неработающий заголовок - это выражение?

Объекты категорий складываете в массив, массив кладёте в хранилище. Маршруту добавляете параметр - идентификатор категории. Пробрасываете его в компонент маршрута, где используете его для извлечения данных категории из хранилища. Всё.

$minPrices = array_values(array_reduce($arr, function($acc, $n) {
  $key = $n['code_id'];
  if (!isset($acc[$key]) || $acc[$key]['price'] > $n['price']) {
    $acc[$key] = $n;
  }

  return $acc;
}, []));

const getNestedItems = (data, test) =>
  data instanceof Object
    ? Object.values(data).flatMap(n => getNestedItems(n, test))
    : test(data) ? [ data ] : [];


const result = getNestedItems(obj, x => /^[A-Z]+$/.test(x)).join('');

<div class="wrapper" v-if="надо рендерить обёртку">
  ...
  <элемент />
  ...
</div>
<элемент v-else />

Или, если считаете, что "элемент" выглядит слишком сложно, чтобы его копипастить, и при этом не хотите оформлять его как отдельный компонент, пишите render-функцию.

все с атрибутом required

Если у них ещё и форма среди общих предков присутствует, то достаточно будет использовать checkValidity.

Ну а если непременно вручную надо проверять, то...

const className = 'здесь ваш класс';

Получаем input'ы:

const inputs = document.querySelectorAll(`.${className}`);

// или

const inputs = document.getElementsByClassName(className);

Проверяем заполненность:

const isFilled = [...inputs].every(n => n.value);

// или

const isFilled = !Array.prototype.some.call(inputs, n => !n.value);

// или

let isFilled = true;
for (const n of inputs) {
  if (!n.value) {
    isFilled = false;
    break;
  }
}

// или

let isFilled = true;
for (let i = -1; ++i < inputs.length && (isFilled = !!inputs[i].value);) ;

// или

const isFilled = !(function isEmpty(i) {
  return i < inputs.length && (!inputs[i].value || isEmpty(-~i));
})(0);