0xD34F

rcs.forEach((residential, i) => {
  ...
  /*
   * никакого this при создании попапов не надо - какой смысл делать свойством
   * компонента один из многих попапов (т.к. тут цикл, новая итерация - новый
   * попап, в результате будет сохранён последний созданный)?
   *
   * то же касается и координат маркера ниже
   */
  const popup = DG.popup({
  ...

  setTimeout(() => {
    DG.marker([ residential.latitude, residential.longitude ], { icon: myDivIcon })
      .addTo(this.markers)
      .bindPopup(popup);
  }, i * 200);
});

data: {
  datasets: [
    {
      borderColor: [ 'цвет 1', 'цвет 2', 'цвет 3', ... ],
      ...
    },
  ],
  ...
},

https://jsfiddle.net/1pLkw2hr/

Куда надо разложить значения элементов массива:

const elems = document.querySelectorAll('.itog_price');

Раскладываем:

elems.forEach((n, i) => n.append(price[i]));

// или

for (const [ i, n ] of elems.entries()) {
  n.innerText = price[i];
}

// или

for (let i = 0; i < elems.length; i++) {
  elems[i].textContent = price[i];
}

// или

(function next(i, n = elems.item(i)) {
  n && (n.appendChild(new Text(price[i])), next(-~i));
})(0);

options: {
  legend: {
    display: false,
  },
},

Attempted import error: 'CreateGlobalStyle' is not exported from 'styled-components'.

Ясно.

Разницу между CreateGlobalStyle и createGlobalStyle самостоятельно разглядеть сможете?

Добавляете в компонент свойство selectedCity, даёте пользователю возможность устанавливать его значение:

<a
  v-for="city in cities"
  @click="selectedCity = city.name"
  class="dropdown-button__item dropdown-item"
>{{ city.name }}</a>

По значению selectedCity достаёте карты:

computed: {
  maps() {
    return (this.cities.find(n => n.name === this.selectedCity) || {}).transport;
  },
},

Если город выбран и, соответственно, карты есть - они показываются пользователю:

<div class="how-to-get__map-wrap" v-if="maps">
  <iframe v-for="map in maps" :src="map.mapLink" frameborder="0" allowfullscreen="true"></iframe>
</div>

array_push($target, ...array_slice($source, $start, $length));

/^\d{2,3}-\d{2,3}$/

Очевидно же - добавлять disabled. Для выбранного чекбокса - когда количество выбранных чекбоксов меньше или равно минимально допустимому. Для не выбранного - когда количество выбранных чекбоксов больше или равно максимально допустимому.

https://jsfiddle.net/x6uzv5hw/

Чекбоксы кастомные и при втором клике на один из них - они полностью игнорируют свойства checked и disabled

Ну значит криво вы их реализовали, только и всего. Погуглите, как сделать правильно.

minimap

const idsA = new Set(ListA.map(n => n.id));
const objB = Object.fromEntries(ListB.map(({ uid, ...n }) => [ uid, (n.id = uid, n) ]));
const ListAB = ListA.map(n => ({ ...n, ...objB[n.id] }));
ListB.forEach(({ uid }) => idsA.has(uid) || ListAB.push(objB[uid]));

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

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

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

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

Вынесите её в thead.


UPD. Как это может выглядеть: thead, и дурацкий вариант.

str.match(/rgb\(.*\)/).pop().match(/\d+/g)

или

str.match(/rgb\((.*)\)/).pop().split(', ')

Замените

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map((el) => el);

на

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map(n => n.outerHTML).join('');

// или

technologyHandler(dataTechnologies).forEach(n => projectTechnologies.appendChild(n));

// или

for (const n of technologyHandler(dataTechnologies)) {
  projectTechnologies.insertAdjacentElement('beforeend', n);
}

// или

projectTechnologies.append(...technologyHandler(dataTechnologies));

ИЛИ

Перепишите technologyHandler следующим образом:

const technologyHandler = str => str
  .split(' ')
  .map(n => `<p class="project_technologies-item">${n}</p>`)
  .join('');

// или

const technologyHandler = str =>
  str.replace(/ ?(\S+)/g, '<p class="project_technologies-item">$1</p>');

И уберите map после её вызова:

projectTechnologies.innerHTML = technologyHandler(dataTechnologies);

Во-первых - погуглите, что такое всплытие событий.

Во-вторых - про модификаторы событий слышали? Надо бы self прикрутить - это если на "тень". Или stop - на окно.

:href="`https://oauth.vk.com/authorize?client_id=${client_id}`"

или

computed: {
  href() {
    return `https://oauth.vk.com/authorize?client_id=${this.client_id}`;
  },
},

:href="href"

или

methods: {
  href: client_id => `https://oauth.vk.com/authorize?client_id=${client_id}`,
},

:href="href(client_id)"

const digits = Object
  .entries([...`${num}`].reduce((acc, n) => (acc[n] = (acc[n] || 0) + 1, acc), {}))
  .reduce((acc, n) => (n[1] > 1 && acc.push(+n[0]), acc), []);

или

const digits = num
  .toString()
  .split('')
  .reduce((acc, n) => (acc[n]++, acc), Array(10).fill(0))
  .map((n, i) => n > 1 && i)
  .filter(n => n !== false);

или

const digits = Array
  .from(String(num), Number)
  .filter((n, i, a) => i !== a.indexOf(n))
  .filter((n, i, a) => i === a.indexOf(n));

или

const digits = (('' + num)
  .match(/\d/g)
  .sort()
  .join('')
  .match(/(\d)\1+/g) || [])
  .map(n => n[0] | 0);

Ловите событие change, обходите элементы, собирайте запрос. В чём проблема-то? Например.