0xD34F

Вместо pageX и pageY используйте clientX и clientY.

Что если пользователь введёт значение, которое нельзя привести к числу? Получите NaN, этот случай у вас никак не обрабатывается.

Результат повторного ввода в переменную count не записывается, если первый раз ввели некорректное значение, то оно там так и останется.

Кроме того, непонятно, почему вы решили, что пользователю хватит всего двух попыток, чтобы ввести корректные данные. Это абсурд. Сделайте цикл, пусть мучается до победного конца:

let count = null;
while (1) {
  count = prompt('Введите количество колонок для таблицы умножения') | 0;
  if (count > 0) {
    break;
  }
  alert('Введите корректное число');
}

lat + x != 11

lon + y != 11

А 10, стало быть, является допустимым значением, да? И это значение вы используете в качестве индекса массива, чей размер - тоже 10. Толково придумано, ничего не скажешь.

Потому что нет экшена. Что непонятного-то? Раз нет, а вызывать надо - добавьте его.

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

я понял, что нет экшена. Вопрос в том, что он есть )

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

Какие могут быть варианты:

• Вместо actions засунули его в mutations
  
• Допустили опечатку - вместо actions написали anctions или action или actons или...
  
• Забыли подключить модуль, в котором экшен находится
  
• Неправильно вызываете - экшен находится в namespaced модуле
  
• ...
  

Проверяйте код своего хранилища, думайте.

const decodeMorse = code => code
  .trim()
  .split('   ')
  .map(n => n.split(' ').map(m => MORSE_CODE[m]).join(''))
  .join(' ');

или

const decodeMorse = code => code
  .trim()
  .replace(/\S+ ?/g, m => MORSE_CODE[m.trim()])
  .replace(/  /g, ' ');

Создадим объект, который будет содержать компоненты цвета:

colorComponents: {
  r: 0,
  g: 0,
  b: 0,
},

На основе этого объекта создадим элементы управления значениями компонентов цвета:

<div v-for="(v, k) in colorComponents">
  {{ k }}
  <input v-model="colorComponents[k]" type="range" min="0" max="255">
  {{ v }}
</div>

И стилизуем какой-нибудь элемент, вычисляя итоговый цвет:

<div :style="style">

computed: {
  style() {
    return {
      'background-color': `rgb(${Object.values(this.colorComponents).join(',')})`,
    };
  },
},

jsfiddle.net/o1xe8gmk/1

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

const itemSelector = '.item';
const activeClass = 'active';
const maxActive = 3;
const onMaxActiveClick = () => alert(`больше ${maxActive} нельзя`);

Слушать клики можно непосредственно на элементах:

let activeCount = 0;

for (const n of document.querySelectorAll(itemSelector)) {
  n.addEventListener('click', onClick);
  activeCount += n.classList.contains(activeClass);
}

function onClick({ currentTarget: item }) {
  if (activeCount < maxActive || item.classList.contains(activeClass)) {
    activeCount += item.classList.toggle(activeClass) ? 1 : -1;
  } else {
    onMaxActiveClick();
  }
}

Или на каком-нибудь их общем предке:

document.addEventListener('click', function(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    const active = document.querySelectorAll(`${itemSelector}.${activeClass}`);
    if (active.length < maxActive || item.classList.contains(activeClass)) {
      item.classList.toggle(activeClass);
    } else {
      onMaxActiveClick();
    }
  }
});

Кажется, кто-то не в курсе, что индексация массивов начинается с нуля.

Ну нет у вас ни в одном из массивов элемента с индексом 10, нет. Соответственно, когда lon принимает значение 10, map[lon] оказывается undefined, отсюда и ошибка.

А не многовато ли у вашего ngModel скобок?

А можно ли как то прокинуть это событие далее(всплытие), что бы можно было его прослушать на любом компоненте-предке, в том числе и на корневом?

Вручную в каждом компоненте делайте emit, или гуглите, как сделать шину событий (event bus) - можно будет подписываться на нужное событие где угодно.

В чем ошибка?

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

Поменяйте input и span местами - будет работать как вам нужно.

Делегируйте обработку событий, и тогда не придётся беспокоиться о пропавших обработчиках. Как-то так.

Есть таблица
<...>
Может быть, можно упростить

Можно. Вернее, не надо было ничего усложнять - перенесли бы вашу таблицу в код как она была. Двумерный массив. Первый индекс соответствует месяцу (надо только будет вычесть единицу из того, что введёт пользователь), второй возрасту (а здесь, соответственно, вычесть 18). Вся логика со switch'ами ужмётся до одной строчки.

$text = preg_replace_callback("/\{a (\d+)\}/", function($matches) use($routes) {
  return "<a href=\"".$routes[$matches[1]]."\">";
}, $text);

const getCheckedValues = elements =>
  [...elements].reduce((acc, n) => (
    n.checked && (acc[n.name] = acc[n.name] || []).push(n.value),
    acc
  ), {});

Если пустые группы тоже должны присутствовать, то

const getCheckedValues = elements =>
  Array.prototype.reduce.call(
    elements,
    (acc, { name, value, checked }) => (
      acc[name] = acc[name] || [],
      checked && acc[name].push(value),
      acc
    ),
    {}
  );

const numbers = (string.match(/-?\d+(\.\d+)?/g) || []).map(Number);

// или

const numbers = string.split(' ').map(parseFloat).filter(Number.isFinite);

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

@mouseenter="showDrop = true"
@mouseleave="showDrop = false"

UPD. А зачем два свойства для управления отображением форм? Они что, могут показываться одновременно? Может, лучше сделать одно свойство, которое будет содержать имя показываемой формы? Как-то так:

data: () => ({
  showForm: 'auth',
  // ...
}),

Форма авторизации: v-show="showForm === 'auth'", @click="showForm = 'reg'".
Форма регистрации: v-show="showForm === 'reg'", @click="showForm = 'auth'".

[Symbol.iterator]() {
  let curr = this.head;

  return {
    next() {
      if (curr) {
        const item = curr;
        curr = curr.next;
        return {
          done: false,
          value: item,
        };
      } else {
        return {
          done: true,
        };
      }
    },
  };
},

Получается, что объявляем две переменных <...> То есть это равносильно

Не получается, не равносильно. Объявляется одна переменная. Вторая - выполняется лишь присваивание. И если - ВНИМАНИЕ - переменной с таким именем нет в текущей области видимости, будет выполнено присваивание переменной из внешней области видимости. Это, как нетрудно понять, отличный источник потенциальных багов (переменная, которую вроде бы никто не трогал, внезапно своё значение изменила). Ну а если такой переменной ни в одной из внешних областей видимости нет, будет создана глобальная переменная.

Короче, подобный код - безграмотный (а в строгом режиме, при отсутствии второй переменной в какой-либо из доступных областей видимости - и вовсе нерабочий, упадёт с ошибкой).

ховер на .th-search-box не срабатывает, почему?

Потому что никакого ховера у вас там нет, нечему срабатывать.

Я бы предположил, что

.th-icon-box:hover .th-search-box

стоит заменить на

.th-icon-box:hover + .th-search-box,
.th-search-box:hover