edward_freedom

Собираем начальные и конечные точки сегментов маршрута (объекты вида { точка: сегмент }). Находим начальный сегмент маршрута - такой, начальная точка которого не является ничьей конечной. Следующий сегмент маршрута - такой, начальная точка которого является конечной точкой текущего сегмента. Ну и крутим цикл до тех пор, пока текущий сегмент маршрута существует, не забывая сохранять его в результирующий массив:

function sort(route) {
  const pointsFrom = Object.fromEntries(route.map(n => [ n.from, n ]));
  const pointsTo = Object.fromEntries(route.map(n => [ n.to, n ]));
  const sorted = [];

  for (
    let segment = route.find(n => !pointsTo[n.from]);
    segment;
    segment = pointsFrom[segment.to]
  ) {
    sorted.push(segment);
  }

  return sorted;
}

Отфильтровать данные с использованием введённой пользователем строки:

const filteredPeople = people.filter(n => n.name.includes(searchFilter));

Использовать для рендеринга результат фильтрации вместо полных данных:

<ul className="list-group">
  {filteredPeople.map(n => (
    ...

select.addEventListener('change', function() {
  swiper.slideTo(this.selectedIndex);
});

str.match(/(?<=\{.*)[^\We]+(?=.*\})/g)

public static string SwitchExpression(object arg) => arg switch
{
	String str => "is string",
	Int32 int32 => "is int32",
	// ....
	_ => "is unexpected type"
};

$mail = "Welcome to php, Mr %s";
echo sprintf($mail, Names::$egor);

Object.values(arr.reduce((acc, { category, ...n }) => (
  (acc[category.id] ??= { ...category, tanks: [] }).tanks.push(n),
  acc
), {}))

Object.keys(a).forEach(n => b.hasOwnProperty(n) && (a[n] = b[n]));

или

for (const [ k, v ] of Object.entries(b)) {
  if (a.hasOwnProperty(k)) {
    a[k] = v;
  }
}

Судя по

const appSingle = new Vue({

вы используете vue 2. В то время как имена классов соответствуют третьей версии (был ряд изменений):

.planslider-enter-from {

.planslider-leave-from {

Непосредственно к заявленной проблеме не относится, но мимо пройти никак нельзя:

<transition-group tag="div" class="single-estate-planimetry__slider" name="planslider" appear>
    <div v-if="index === currentPlanimetry"  :data-index="index" class="single-estate__descr-img" v-for="(item, index) in planimetry" :key="item.nome">

Заменить transition-group на transition. Убрать v-if и v-for. Сделать вычисляемое свойство, представляющее текущий элемент.

Интересно, а что имеет сказать документация по поводу функции обновления состояния? Да вот что:

React гарантирует, что идентичность функции setState стабильна и не изменяется при повторных рендерах.

Ничего оборачивать не надо.

Используйте ref вместо reactive.

Два класса не нужно - уберите closed, пусть элементы по умолчанию будут скрыты:

- .box.closed .list {
-   display: none;
- }
+ .box .list {
+   display: none;
+ }
+ .box.opened .list {
+   display: block;
+ }

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

const containerSelector = '.section';
const itemSelector = '.box';
const buttonSelector = '.control-label';
const activeClass = 'opened';


// jquery, как вы и хотели
$(itemSelector).on('click', buttonSelector, ({ delegateTarget: t }) => $(t)
  .toggleClass(activeClass)
  .closest(containerSelector)
  .find(itemSelector)
  .not(t)
  .removeClass(activeClass)
);

// или, к чёрту jquery;
// вешаем обработчик клика на каждый заголовок
const onClick = ({ currentTarget: t }) => t
  .closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(function(n) {
    n.classList[n === this ? 'toggle' : 'remove'](activeClass);
  }, t.closest(itemSelector));

document
  .querySelectorAll(`${containerSelector} ${buttonSelector}`)
  .forEach(n => n.addEventListener('click', onClick));

// или, добавляем обработчик клика один раз для всех
document.addEventListener('click', ({ target: t }) => t
  .closest(buttonSelector)
  ?.closest(containerSelector)
  ?.querySelectorAll(itemSelector)
  .forEach(n => n.classList[n.contains(t) ? 'toggle' : 'remove'](activeClass))
);

const names = Array.from(
  document.querySelectorAll('#mainTable input:checked'),
  n => n.name
);

или

const names = Array.prototype.reduce.call(
  document.getElementById('mainTable').getElementsByTagName('input'),
  (acc, n) => (n.checked && acc.push(n.getAttribute('name')), acc),
  []
);

.active {
  background: red;
}

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  t.closest('tr').classList.toggle('active', t.checked);
});

// или

document.querySelectorAll('table tr').forEach(function(n) {
  n.addEventListener('change', this);
}, e => e.currentTarget.classList.toggle('active', e.target.checked));

UPD. Наконец-то дождались, js теперь тут не нужен:

tr:has(.form-check-input:checked) {
  background: red;
}

$fileCodes = [];
array_walk_recursive($array, function($v, $k) use(&$fileCodes) {
  if ($k === 'fileCode') {
    $fileCodes[] = $v;
  }
});

<div class="error" v-if="$v.forms.additional.$dirty && $v.forms.additional.$invalid">

additional: this.visible ? { required } : {},

data: () => ({
  items: Array.from({ length: 4 }, () => ({
    checked: false,
    value: '',
  })),
}),

<div v-for="(n, i) in items">
  <label>
    <input type="checkbox" v-model="n.checked">
    {{ i }}
  </label>
  <input v-if="n.checked" v-model="n.value">
</div>

Как это вообще работает?

Откройте документацию, и прочтите.

Как мне при срезе включать последний элемент списка?

Уберите -1, просто -3:.

function collectValues(target, ...sources) {
  const onInput = () => target.value = sources.map(n => n.value).join(', ');
  sources.forEach(n => n.addEventListener('input', onInput));
  return () => sources.forEach(n => n.removeEventListener('input', onInput));
}


collectValues(...document.querySelectorAll('input'));

Меняем transition на transition-group, сдвигаем его влево на ширину слайда; показываем слайды не с активного, а с предшествующего активному; чтобы не видеть, как первый слайд, ставший последним, уезжает в конец, задаём слайдам z-index. Вот говнокод.