0xD34F

const getCard = num => cards.find(n => n.id === num);
// ...
const card = getCard(cardRandom(1, 51));

Правда, не очень понятно, зачем такие сложности. Кроме того, непонятно, гарантируется ли существование объекта с указанным id. Может, лучше использовать случайное число как индекс? Типа так:

const card = cards[Math.random() * cards.length | 0];

const TYPES = {
  1: 'region',
  3: 'area',
  7: 'street',
};

const newItems = items.map(({ parents_names, parents_levels, ...n }) =>
  parents_names.reduce((acc, name, i) => (
    acc[TYPES[parents_levels[i]]] = name,
    acc
  ), n)
);

О каких классе, имени атрибута и значении идёт речь:

const className = 'element';
const attrName = 'data-attr';
const attrValue = 'this-element';

Если больше заранее ничего не известно, то собираем селектор и получаем элемент:

const elem = document.querySelector(`.${className}[${attrName}="${attrValue}"]`);

Если же вдруг уже была получена коллекция элементов с указанным классом...

const elems = document.getElementsByClassName(className);

// или

const elems = document.querySelectorAll('.' + className);

...то имеет смысл поискать в ней вместо всей страницы:

const elem = Array.prototype.find.call(
  elems,
  n => n.getAttribute(attrName) === attrValue
);

// или

let elem = null;
for (const n of elems) {
  if ((n.attributes[attrName] || {}).value === attrValue) {
    elem = n;
    break;
  }
}

// или

let elem = null;
for (let i = 0; !elem && i < elems.length; i++) {
  elem = elems[i].matches(`[${attrName}="${attrValue}"]`) ? elems[i] : elem;
}

Подсказали что правильно сделать через атрибут data-*

Ну да. Добавляете блокам такие же data-key, как у тех элементов, по клику на которые блоки надо показывать. По клику хватаете все блоки и показываете те, у которых data-key совпал с кликнутым, остальные скрываете:

const key = 'key';
const buttonSelector = `a[data-${key}]`;
const contentSelector = `div[data-${key}]`;

$(document).on('click', buttonSelector, function() {
  $(contentSelector)
    .hide()
    .filter((i, n) => n.dataset[key] === this.dataset[key])
    .show();
});

// или

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    document.querySelectorAll(contentSelector).forEach(n => {
      n.hidden = n.dataset[key] !== t.dataset[key];
      // или (надо будет в стили добавить .hidden { display: none; })
      n.classList.toggle('hidden', n.dataset[key] !== t.dataset[key]);
    });
  }
});

Вопрос - а как вы используете myvalue? Если где-то в шаблоне, то v-if исправит ситуацию:

<div v-if="my_dates['2018-04-23']">{{ myvalue }}</div>

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

myvalue() {
  сonst date = this.my_dates['2018-04-23'];
  return date ? Number(date.april) + Number(date.may) : null;
}

свойство fillColor

Имеется довольно большая матрица (чем больше- тем лучше).
Как правильно отрисовать её на странице?
Хотелось бы еще и с нормальной частотой, хотя-бы раз в 50 ms.

Используйте canvas. При правильном подходе сможете добиться результата на порядок лучше, чем 50 миллисекунд.

не будет ли быстрее преобразовывать матрицу в строку через arr.toString()...

Не будет.

Картинка

Указывать состояния не нужно - цветового обозначения вполне достаточно. Кроме того, при небольших размерах клеток вы эти цифры либо не увидите, либо они не будут влезать в свои клетки (вы представьте, что отрисовываете матрицу хотя бы 300x300).

Инициализируйте экземпляр Vue один раз, при открытии страницы:

const vm = new Vue({
  el: '#table-box',
  data: () => ({
    items: [],
  }),
});

А в коллбэке ajax-запроса просто обновляйте данные:

success(data) {
  vm.items = data;
},

const index = str.search(/\d\D*$/);

// или

const index = str.replace(/\D*$/, '').length - 1;

// или

const index = [...str].reduce((max, n, i) => +n === +n ? i : max, -1);

// или

const index = +(Object.entries(str).filter(n => !isNaN(n[1])).pop() || [ -1 ])[0];

// или

let index = str.length;
while (--index >= 0 && !'0123456789'.includes(str[index])) ;

// или

const index = (function get(i) {
  return i < 0 || !Object.is(str.charAt(i) * 1, NaN)
    ? i
    : get(~-i);
})(~-str.length);

Вместо prepend используйте метод html.

Или, если внутри #imgTitle есть ещё какой-то контент, сначала удаляйте предыдущий img:

$('#imgTitle').find('img').remove().end().prepend(...

Так? Ну или кастомный фильтр можно сделать.

И еще почему всегда первый элемент в опций виден как undefined ?
И если убрать ng-model то 1-ая опций undefined не будет.

Открываем документацию, и видим, что

If the viewValue of ngModel does not match any of the options, then the control will automatically add an "unknown" option, which it then removes when the mismatch is resolved.

$('.mod__l').append(function() {
  return ({
    m1: mod__c1,
    m2: mod__c2,
    m3: mod__c3,
  })[$('.mod__input', this).data('mod')];
});

замените

:style="{width: this.width, height: this.cavh}"

на

v-bind="{ width: width, height: cavh }"

или

:width="width" :height="cavh"

Помогите пожалуйста понять почему следующий код выводит undefined, а не 5

Выводит где? Как вы этот код запускали? Раз уж вы решили скрыть эту информацию...

Ответ номер раз: а чо вы врёте-то? Открываем консоль, копируем код, запускаем и видим, что выводится 5.

Ответ номер два: jsfiddle, например, по умолчанию оборачивает код в window.onload, соответственно, переменная b в window не попадёт - потому и undefined. (UPD. Исправили эту дичь).

Кусок кода, который в этом виноват:

$(document).mouseup(function (e) { 
    var popup = $('#free_moto_lesson');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.overlay').fadeOut();
        $(popup).fadeOut();
    }
    return false;
});

А конкретно - return false.

Вместо keypress обрабатывать следует событие input. Вписывать руками значение (в смысле - через element.value) в элемент не надо, пусть этим v-model занимается. Сама логика замены символов - дико переусложнено, разбирать смысла не вижу. Вот вам исправленный вариант.

Нужно ли выносить в отдельный компонент это?

Да. Рекурсивный компонент. Для вложенных данных компонент создаёт экземпляры самого себя. Условие продолжения рекурсии (рендеринга конкретного экземпляра компонента) - корректность данных, надо проверять, что в компонент был передан массив ненулевой длины. Например:

name: 'v-tree',
props: [ 'items' ],

<ul v-if="Array.isArray(items) && items.length">
  <li v-for="n in items">
    {{ n.name }}
    <v-tree :items="n.children" />
  </li>
</ul>

1) computed замените на methods

2) добавьте модификатор number в v-model

как сделать, чтобы можно было выбрать максимум 5 дней

Ограничивать максимальную дату конца интервала при изменении начала, и минимальную дату начала при изменении конца. Как-то так.

кстати когда убираю кусок кода, который переводит на русский, все работает

Так форматы дат разные - вот и не получается правильно распарсить.

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

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

Можно сбрасывать интервал по клику на отдельную кнопку. Или по повторному клику на границу интервала в соответствующем дейтпикере (по нижней в #from, по верхней в #to; почему не по любой границе в любом - чтобы можно было выставить интервал в один день, иначе будет сбрасываться). Или... думайте.

Где элементы находятся, и индексы тех, что надо получить:

const parentSelector = '.menu';
const indices = [ 0, 1, 4, 8 ];

Получаем:

const $elems = $(parentSelector).children().filter(i => indices.includes(i));

// или

const $elems = $(indices.map(n => `> :eq(${n})`).join(', '), parentSelector);

Или, к чёрту jquery:

const elems = Array.prototype.filter.call(
  document.querySelector(parentSelector).children,
  (n, i) => indices.includes(i)
);

// или

const elems = document
  .querySelector(parentSelector)
  .querySelectorAll(indices.map(n => `:scope > :nth-child(${n + 1})`));