0xD34F

Кому будем задавать текст: const className = 'класс элементов';.

Какие тут есть варианты:

document.querySelectorAll(`.${className}`).forEach((n, i) => {
  n.innerText = arr[i];
});

// или

const elems = document.getElementsByClassName(className);
for (let i = 0; i < elems.length; i++) {
  elems[i].textContent = arr[i];
}

// или

$('.' + className).text(i => arr[i]);

print(list(filter(lambda n: n % 10 in (2, 3, 4, 5), range(100))))

или

print([n for n in range(100) if n % 10 in (2, 3, 4, 5)])

или

print([m + n * 10 for n in range(10) for m in range(2, 6)])

Никакие хуки тут не нужны. Настройте слежение за свойством:

watch: {
  measureSystem: {
    immediate: true,
    handler() {
      // сюда переносите код из mounted - axios.get(...)
    },
  },
},

Заниматься установкой значений в computed не надо, сделайте measureSystem из обычного свойства вычисляемым (если, конечно, оно используется где-то ещё, помимо показанного запроса; в противном случае можно следить за toggle и вычислять значение параметра units непосредственно перед самим запросом):

computed: {
  measureSystem() {
    return this.toggle === 1 ? 'metric' : 'Imperial';
  },
},

$grouped = array_values(array_reduce($data, function($acc, $n) {
  $id = $n['store_id'];
  if (!isset($acc[$id])) {
    $acc[$id] = [ 'store_id' => $id, 'product_id' => [] ];
  }
  $acc[$id]['product_id'][] = $n['product_id'];
  return $acc;
}, []));

Снимайте обработчик события после того, как нужное действие будет выполнено:

$(window).scroll(function onScroll() {
  if ($(this).scrollTop() > 777) {
    $('.div_clone').clone().appendTo('.container2');
    $(this).off('scroll', onScroll);
  }
});

например

UPD. Используем элемент path, есть внешний контур, покрывающий весь svg, и множество внутренних - для вырезания дырок. Чтобы дырки вырезались, их надо рисовать в направлении, обратном тому, в котором рисовалась основная фигура. То есть, контур рисуется против часовой стрелки:

rectPath = `M0 0 v${vert} h${horz} v${-vert} h${-horz}`

От (0, 0) сначала движемся вниз (v - вертикальное смещение), затем вправо (h - горизонтальное), далее вверх, и наконец обратно горизонтально (вернулись в (0, 0)).

А дырки по часовой стрелке:

cellPath = ([ x, y ]) => `M${offset(x)} ${offset(y)} h${side} v${side} h${-side} v${-side}`

Сначала смещаемся в горизонтальном направлении вправо, затем вниз, потом обратно влево, и обратно вверх.

const isAllUnique = (...args) => new Set(args).size === args.length;

console.log(isAllUnique(69, 187, 666)); // true
console.log(isAllUnique(2, 2, 3, 4)); // false
console.log(isAllUnique(...'ABCDA')) // false

Допустимо ли использовать defs внутри symbol в SVG-элементе?

Да.

А тег style?

Да.

Где можно почитать о таких нюансах?

https://www.w3.org/TR/SVG11/struct.html#SymbolElement

<input @change="doSomethingWithValue" />

methods: {
  doSomethingWithValue(e) {
    const value = e.target.value;
    ...

Если надо в метод передавать дополнительно какие-то параметры, то объект события доступен в шаблоне как $event:

<input @change="doSomethingWithValue($event, 'hello, world!!')" />

$newData = array_map(function($item) {
  return array_map(function($val) {
    return [ 'text' => $val ];
  }, array_values($item));
}, $data);

например

Проблема в том, что рисуется только последний график. Почему?

Потому что

main.innerHTML += str;

После каждого += дочерние элементы main создаются заново. Соответственно, уже созданные графики удаляются.

Создавайте сразу всю разметку.

Или

main.insertAdjacentHTML('beforeend', str);

Или

const canvas = document.createElement('canvas');
main.appendChild(canvas);

$('.nav').on('click', '[href="#id-3"]', function() {
  $('.slick').slick('slickGoTo', 3);
});

const elems = [...document.querySelectorAll('.class1')];
const index = elems.findIndex(n => n.classList.contains('class2'));

или

const elems = document.querySelectorAll('.class1');
let index = elems.length;
while (--index >= 0 && !elems[index].matches('.class2')) ;

или

const index = Array.prototype.indexOf.call(
  document.querySelectorAll('.class1'),
  document.querySelector('.class2')
);

Каждой паре input-картинка добавим общую обёртку:

<div class="country">
  <input class="country-code">
  <img class="country-flag">
</div>

Добавим параметр функции, обновляющей картинку - соответствующий картинке input. Из которого она прочитает код страны и через общего предка найдёт картинку:

function updateFlag(el) {
  const country = countries.find(n => !el.value.indexOf(n.code));
  el.closest('.country').querySelector('.country-flag').src = country ? country.flag : '';
}

Сделаем делегированный обработчик события input, если оно случилось на одном из картиночных input'ов, вызовем функцию обновления, передав ей целевой элемент:

document.addEventListener('input', function(e) {
  if (e.target.classList.contains('country-code')) {
    updateFlag(e.target);
  }
});

Чтобы при загрузке сразу были показаны картинки, вызовем функцию обновления для всех input'ов:

document.querySelectorAll('.country-code').forEach(updateFlag);

https://jsfiddle.net/z2u4sh7k/

<Switch>
    <div id="main" className="site__main">

Дочерними элементами Switch могут быть только Route или Redirect. Поменяйте их местами, что ли - пусть Switch будет внутри этого main'а.

Делаем массив стран с кодами и флагами:

const countries = [
  { code: ..., flag: ... },
  { code: ..., flag: ... },
  ...
];

Ищем совпадение с введёнными данными:

const country = countries.find(n => !inputCode.value.indexOf(n.code));
inputFlag.src = country ? country.flag : '';

https://jsfiddle.net/dskz4u7b

Имя задайте элементу. Типа, name="email".

Почему бы не воспользоваться готовым компонентом? Весьма вероятно, что там ваша проблема уже решена.