0xD34F

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) =>
  Array(count)
    .fill`*`
    .join``
    .concat(str.substring(str.length - 4));

или

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

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

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

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

пусть будет

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

Функция суммирования:

function sum(data, key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  let result = 0;

  for (const n of data) {
    result += getVal(n);
  }

  return result;
}

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

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

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

function onChange() {
  result.textContent = sum(
    this.querySelectorAll(':checked'),
    n => +n.getAttribute('rel')
  );
}

// или

function onChange(e) {
  result.innerText = sum(
    e.currentTarget.elements,
    n => n.attributes.rel.value * n.checked
  );
}

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

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('');

или

function* getNestedItems(data, test) {
  if (Object(data) === data) {
    for (const k in data) if (Object.hasOwn(data, k)) {
      yield* getNestedItems(data[k], test);
    }
  } else if (test(data)) {
    yield data;
  }
}

const result = ''.concat(...getNestedItems(obj, x => x?.toUpperCase?.() === x));

<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, n = inputs.item(i)) {
  return n && (!n.value || isEmpty(-~i));
})(0);

if (this.frame < 0) {
    this.frame = this.slides.lenght-1;
    this.setBackground(this.slides[this.frame])
}

Если frame неотрицательный, то вызывать setBackground уже не надо?

if (this.frame > this.slides.length) {

По-вашему, у массива может быть элемент с индексом, равным длине?

buttonLeft.addEventListener('click', slider.left());

Функция и результата её вызова - не одно и то же.

while не совсем удобен

Можно while заменить на for, переместить вызов exec в условие продолжения цикла - получится одна строка вместо трёх, область видимости вне цикла не загажена ненужной там переменной, вроде бы неплохо:

for (let m; m = re.exec(str);) {
  console.log(m.groups);
}

Отказаться от exec стоит по другой причине. Проблема в том, что если забыть флаг g при определении регулярного выражения, то exec будет при каждом вызове выдавать первое совпадение, т.е., цикл получится бесконечным. А вот с matchAll такой ерунды не случится, без флага выдаст ошибку:

for (const { groups } of str.matchAll(re)) {
  console.log(groups);
}

Посчитать, сколько раз каждое из значений встречается в массиве, затем полученные результаты разделить на длину массива и умножить на 100:

Array.from(
  arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map),
  n => [ n[0], (n[1] / arr.length * 100).toFixed(2) + '%' ]
)

Вот это правильно - не читать документацию.

yAxis: {
  plotLines: [
    {
      color: 'red',
      value: 13,
      width: 5,
      zIndex: 666,
    },
  ],
  ...