0xD34F

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

Тем, что значение 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'] }

Array.new(counter){|i| [ "counter #{i + 1}", arr ]}.flatten

Разберитесь с приоритетом операторов.

Давайте-ка скобок добавлю, чтобы яснее стало, что в каком порядке выполняется:

('ic' + true) ? 'on' : ('off' + '.svg')

Ну и конечно писать подобные выражения в шаблоне - совсем не круто. Вынесите его в вычисляемое свойство или метод, например:

computed: {
  className() {
    return условие ? 'icon.svg' : 'icoff.svg';
  },
  ...

<p :class="className">

orderBy(data, [ n => n.updatedEl ?? n.createdEl, 'desk' ])

const [ showImage, setShowImage ] = useState(true);

<button onClick={() => setShowImage(!showImage)}>click me</button>
{showImage ? <img src="..." /> : null}

Регулярные выражения не нужны:

implode("\n", array_slice(explode("\n", $text), 0, количество_строк))

Но если очень надо, то:

preg_match('~([^\n]+(\n|$)){0,количество_строк}~', $text, $match)

О каких элементах идёт речь, какое свойство и как надо обновлять:

const containerSelector = '.select';
const controlSelector = '.input-range';
const controlledSelector = '.slider';
const key = 'left';
const getVal = el => (((el.value / 50) + 1) * 25) + '%';

Поднимаемся от элемента управления к элементу карточки, ищем внутри кого надо:

$(document).on('input', controlSelector, function() {
  $(this)
    .closest(containerSelector)
    .find(controlledSelector)
    .css(key, getVal(this));
});

// или

document.addEventListener('input', ({ target: t }) => {
  t.matches(controlSelector) && t
    .closest(containerSelector)
    .querySelector(controlledSelector)
    .style
    .setProperty(key, getVal(t));
});