0xD34F

Перебираем массив от конца к началу, на каждом шаге создаём копию текущего элемента, к которой будет добавлена ссылка на объект, полученный на предыдущем шаге.

Коротко:

const arrToSinglyLinkedList = (arr, nextKey = 'next') =>
  arr.reduceRight((acc, n) => ({ ...n, [nextKey]: acc }), null);

Длинно:

function arrToSinglyLinkedList(arr, nextKey = 'next') {
  let list = null;

  for (let i = arr.length; i--;) {
    const node = Object.assign({}, arr[i]);
    node[nextKey] = list;
    list = node;
  }

  return list;
}

Пользоваться этим, понятное дело, так:

const list = arrToSinglyLinkedList(arr, 'child');

присваивание всем переменным, которые используются в компоненте, их дефолтное значение мне тоже кажется не лучшей идеей

Кроме "кажется" другие возражения против данного способа есть?

Если не устраивает объём кода - вынесите его в отдельный метод, который будет вызываться при создании экземпляра компонента и когда значения надо сбросить.

const items = document.querySelectorAll('.b1');
let toggle = 0;

document.querySelector('button').addEventListener('click', () => {
  toggle ^= 1;
  items.forEach((n, i) => n.classList.toggle('_tog-sw', i & 1 ^ toggle));
});

$t = &$arr;

foreach ($keys as $key) {
  if (!isset($t[$key]) || !is_array($t[$key])) {
    $t[$key] = [];
  }

  $t = &$t[$key];
}

$t['value'] = $val;

Используйте currentTarget, если внутри обработчика нужен элемент, к которому обработчик привязан.

Или вместо объекта события можете воспользоваться this - это и будет ссылка на нужный элемент. Конечно, только в том случае, если какое-то другое значение не было заранее привязано к обработчику (как такое может быть - bind и стрелочные функции).

Ещё бывает так (не ваш случай, но упомянуть стоит), что обработчик висит выше нужного элемента - в этом случае можно подняться до него от target с помощью closest.

Очевидно же раз - понизить используемую версию chart.js. Так, чтобы первой цифрой была 2, а не 3.

Очевидно же два - подождать, пока выйдет версия vue-chartjs с поддержкой третьего chart.js.

Очевидно же три - форкнуть vue-chartjs и реализовать поддержку третьего chart.js самостоятельно.

Элементы исходного массива - это данные столбцов. Соответственно, получаете количество строк (максимальная из длин вложенных массивов) и в качестве значения rowspan последним элементам столбцов устанавливаете

1 + количество_строк - количество_элементов_в_данных_текущего_столбца

https://jsfiddle.net/th7w51kp/

чем это может быть вызвано?

Тем, что значение isLoadError меняется только с false на true. Надо его как-то обратно сбрасывать.

Можно следить за значением src, если изменилось, выставлять false:

useEffect(() => setIsLoadError(false), [ src ]);

Другой вариант - в ImagePopup пересоздавать экземпляр компонента Image при изменении данных карточки, указав соответствующий ключ:

<Image key={card ? card.link : 'hello, world!!'}

Между "не корректно" и "не так, как мной задумано" есть существенная разница.

Всё работает так, как и должно. Обратите внимание на значения атрибута name - они совпадают у разных строк.

А вообще, две радиокнопки тут не нужны - достаточно одного чекбокса.

через render-функцию

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

код же можно изменить под vue 3, да?

да

const word = 'сейчас';

const newStr = str.replace(RegExp(`(?<=(^|\\s)${word})\\s.*`), '');

Правда, подозреваю, что вам надо не совсем это. Может, заменить цифры в конце строки? Это было бы проще:

str.replace(/\d+$/, новое_число)

const sum = arr => arr
  .flatMap(Object.entries)
  .reduce((acc, [ k, v ]) => (
    acc[k] = acc.hasOwnProperty(k) ? acc[k] + v : v,
    acc
  ), {});


const obj = sum(arr);

Кто у элемента родитель, какой класс обозначает активность, и сам элемент:

const parent = document.querySelector('.xlist');
const className = 'active';
const el = parent.querySelector(`:scope > .${className}`);

Какие есть варианты получения индекса:

const index = el ? [...parent.children].indexOf(el) : -1;

или

let index = -1;
for (let n = el; n; n = n.previousElementSibling, index++) ;

или

const index = Array.prototype.findIndex.call(
  parent.children,
  n => n.classList.contains(className)
);

или

const { children } = parent;
let index = children.length;
while (index-- && !children[index].matches(`.${className}`));

Где вызов экшена GET_CHARACTERS? Не вижу. Надо добавить.

let data = await axios.get(baseURL);
context.commit('SET_CHARACTERS', data)

Здесь вы передаёте в мутацию объект ответа целиком - не только данные, но ещё и статус, заголовки и т.д. Кроме того, судя по дефолтному значению characters, вы желаете получить массив, а возвращается объект, содержащий массив в качестве значения свойства results. Так что пусть будет

const response = await axios.get(baseURL);
context.commit('SET_CHARACTERS', response.data.results);

<div>{{ $store.state.characters }}</div>

Раз выводите массив - выводите его поэлементно:

<div v-for="n in $store.state.characters">
  {{ n.name }}
</div>

UPD. https://jsfiddle.net/o3wszLdv/

filters: {

vue@next

Интересно, что по этому поводу говорит документация? А вот что:

In 3.x, filters are removed and no longer supported. Instead, we recommend replacing them with method calls or computed properties.

- ([a-zA-Z0-9]+)
+ ([\\w-]+\\/)+

- const linkBase = "ozon.ru";
+ const linkBase = "ozon\\.ru";

Вынести .zoom за пределы карты, добавить общую обёртку с относительным позиционированием:

<div class="map-wrapper">
  <div class="zoom">
    <div data-zoom="+1" class="zoom-in"></div>
    <div data-zoom="-1" class="zoom-out"></div>
  </div>
  <div class="map"></div>
</div>

.map-wrapper {
  position: relative;
}

Чтобы .zoom отображался поверх карты, задать ему z-index и абсолютное позиционирование:

.zoom {
  position: absolute;
  z-index: 666;
}

Добавить обработчик клика по кнопкам:

document.querySelector('.zoom').addEventListener('click', function(e) {
  const zoomChange = +e.target.dataset.zoom;
  if (zoomChange) {
    map.setZoom(map.getZoom() + zoomChange);
  }
});

https://jsfiddle.net/mu32azvy/

Работает.

Почему вы этого не видите? Погуглите, что такое всплытие событий. Затем, держа в голове свежеприобретённые знания, присмотритесь к этому коду:

function fb3cont() {

  b3Cont.classList.remove("__active");
}
document.onclick = function() {
  if (b3Cont.classList.contains("__active")) { fb3cont()};
}

stats = { n['name']: n['value'] for n in r['playerstats']['stats'] }