z_u_q

Начинать вычисления только после того, как компонент добавлен на страницу (mounted), иначе размеры элемента будут неизвестны. Добавить переменную для вычисления ширины: в JQuery-примере эту роль выполняет menuItemsCounter. Использовать this.$refs.menu[index] для вычисления ширины каждого отдельного элемента.
Пример

Сделать еще одну обертку.
У псевдо с тенью задана высота 100%, а родительский блок 200px. Значит больше 200 тень не станет.
https://codepen.io/Ankhena/pen/JjorKOj

const videos = document.querySelectorAll('video');
const onPlay = e => videos.forEach(n => n !== e.target && n.pause());
videos.forEach(n => n.addEventListener('play', onPlay));

https://jsfiddle.net/vladiklinnik/mxanb2dk/17/ - решение

https://stackoverflow.com/questions/31186257/fallb...

Yes < picture > tag is part of html5 and according to documentation, its fallback is < img src=... > which will work even in very old browsers.

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

Чтобы не лезть в скрипты, может, что-то вроде этого подойдет?

.select2-selection__choice::after {
	content: ',';
}

.select2-selection__choice:last-child::after {
	content: '';
}

UPD: да, последний элемент в списке не является последним по факту, поэтому можно хакнуть вот так:

.select2-selection__rendered li:nth-last-child(2)::after {
  content: '';
}

.tags li.hidden {
  display: none;
}

document.querySelectorAll('.tags b').forEach(n => {
  n.closest('li').classList.add('xxx');
  n.addEventListener('click', onClick);
});

function onClick(e) {
  for (
    let el = e.target.closest('li');
    (el = el.nextElementSibling) && !el.classList.contains('xxx');
    el.classList.toggle('hidden')
  ) ;
}

Добавить C:\Users\Smirnov.Denis\AppData\Roaming\npm\ в PATH.

Останавливайте всплытие при клике на инпут:

$list.find('input').click(e => e.stopPropagation());

Или проверяйте целевой элемент (это в обработчике клика по $listItems):

if (!$(e.target).is('input')) {
  $list.hide();
}

$('#topPanel').val(valTop.join(''));

Еще лучше, убрать \n у

valTop.push(row['value']);

и при выводе его добавлять

$('#topPanel').val(valTop.join('\r\n'));

Запятые берутся из-за того, что функция val пытается преобразовать ваш массив в строку, вызовом toString массива. А toString массива склеивает массив, разделяя элементы запятой

[1,2,3].toString() // "1,2,3"

чтобы склеить массив без запятой (или чтобы использовать другую строку), нужно использовать функцию join.

[1,2,3].join(''); // 123

если в join не передать аргумент, то по умолчанию опять разделителем будет запятая

[1,2,3].join(); // 1,2,3

Убери у .dropdown position: relative;, а у .dropdown-content - top: 0;

Позиционируйся от общей обертки.

.dropdown {
    display: flex;
}
.dropdown-content {
    flex-flow: column;
    width: 100%;
}

$(response).filter('.item').each(function() {
  $owl.trigger('add.owl.carousel', this);
});
$owl.trigger('refresh.owl.carousel');

navContainer: $(this).prev().find('.arrows')

а вообще, было бы неплохо сделать так, чтобы у .arrows и у .i-catalogList всё-таки был общий предок

Что-то вы переусложнили, всё гораздо проще:

if (coord.every((n, i) => n === coordinates[i])) {
  placemark.balloon.open();
}

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

const placemarks = elem.find('.map-balloonContent').get().map(n => createPlacemark({
  coord: $(n).data('coord'),
  content: $(n).html(),
}));
placemarks.forEach(n => myMap.geoObjects.add(n));
placemarks[0].balloon.open();

elem.on('clickAddress', function(e, coord) {
  placemarks.find(n => n.geometry.getCoordinates().every((m, i) => m === coord[i])).balloon.open();
});

Вариант в виде плагина

https://jsfiddle.net/m913pr75/