0xD34F

<iframe :srcdoc="mailContent"></iframe>

на youtube

Нет конечно. Доверяйте официальной документации.

Вы уже используете vuex, вот через него данные и гоняйте.

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

через Vuex я уже сделал, теперь хочу потренироваться на шине событий

"Потренироваться"? Вам это не нужно - вы же начинающий, а шина событий к применению давно уже не рекомендуется. Зачем вам учиться с использованием сомнительных и устаревших практик?

в чём моя ошибка понять не могу

"Ошибка"? Ошибки - у вас их целый ворох.

Если говорить о тех, из-за которых наблюдаемое поведение отличается от ожидаемого, то это: во-первых, передача данных до того, как экземпляр компонента (окно добавления события) создаётся; во-вторых, подписка на события в диалоговом окне в обработчике клика по кнопке добавления, а не при создании компонента.

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

В общем, всё очень-очень плохо.

Весь текст, как я понимаю, находится в js-файле.

Не понимаете. Очевидно, вы не слышали про разделение представления и содержания. Никто никакие "таблицы из 50+ позиций", "записи из блогов" и т.д. в компоненты не зашивает. Данные подгружаются отдельно. И размещаются в заранее подготовленных местах.

То есть, вместо

<tr>
<tr>
...
<tr>

должно быть

<tr v-for="n in data">

loadData() {
  fetch(...).then(r => r.json()).then(r => this.data = r);
},

Рекурсия есть:

const sumNested = (data, getVal, key) => Object
  .entries(data instanceof Object ? data : {})
  .reduce((acc, [ k, v ]) => acc + sumNested(v, getVal, k), getVal(key, data));


const numItems = sumNested(obj, (k, v) => (k === 'items' && Array.isArray(v)) ? v.length : 0);

Рекурсии нет:

function sumNested(data, getVal) {
  let result = 0;

  for (const stack = [ [ , data ] ]; stack.length;) {
    const [ k, v ] = stack.pop();
    stack.push(...(v instanceof Object ? Object.entries(v) : []));
    result += getVal(k, v);
  }

  return result;
}

https://jsfiddle.net/7umwaqfd/

.text::after {
  content: '';
  position: absolute;
  left: 23px;
  top: -10px;
  width: 16px;
  height: 16px;
  background: #f2fbff;
  border: 1px solid transparent;
  border-top-color: #cfcfcf;
  border-left-color: #cfcfcf;
  transform: rotate(45deg);
}

final_data.reduce((acc1, num1) => acc1.reduce((acc2, num2) => acc2.concat(num1.map(num3 => [].concat(num2, num3))), []))

Вот это выглядит прям очень нехорошо - acc2.concat следует заменить на acc2.push, нет никакой необходимости в создании нового массива на каждом шаге (и, соответственно, копировании всех его элементов), можно добавлять новые элементы в существующий массив:

final_data.reduce((acc1, num1) => {
  return acc1.reduce((acc2, num2) => {
    acc2.push(...num1.map(num3 => [...num2, ...num3]));
    return acc2;
  }, [])
})

UPD. Да и промежуточные массивы, состоящие из элементов num2 и num3, тоже не нужны, можно сразу строки создавать:

return final_data.reduce((acc1, num1) =>
  acc1.reduce((acc2, num2) => (
    acc2.push(...num1.map(num3 => num2 + num3)),
    acc2
  ), [])
).join(',');

const whatIsInAName = (collection, source) =>
  collection.filter(function(n) {
    return this.every(([ k, v ]) => n[k] === v);
  }, Object.entries(source));

или

function whatIsInAName(collection, source) {
  const result = [];

COLLECT:
  for (const n of collection) {
    for (const k in source) {
      if (n[k] !== source[k]) {
        continue COLLECT;
      }
    }

    result.push(n);
  }

  return result;
}

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

const parentSelector = '.wrap';
const wrapperTag = 'div';
const wrapperClass = 'wrap-item';
const wrapSize = 4;

Оборачиваем:

const $items = $(parentSelector).children();

for (let i = 0; i < $items.length; i += wrapSize) {
  $items.slice(i, i + wrapSize).wrapAll(`<${wrapperTag} class="${wrapperClass}">`);
}

или

const parent = document.querySelector(parentSelector);

parent.append(...Array.from(
  { length: Math.ceil(parent.children.length / wrapSize) },
  () => {
    const wrapper = document.createElement(wrapperTag);
    wrapper.classList.add(wrapperClass);
    wrapper.append(...Array.prototype.slice.call(parent.children, 0, wrapSize));
    return wrapper;
  }
));

Свойство navTitles:

navTitles: {
  days: 'MM',
},

https://jsfiddle.net/dkwL24f9/

const text = document.querySelector('#area').value;
const pre = document.querySelector('#pre');

pre.innerHTML = text.replace(/f+/g, '<span>$&</span>');

document.addEventListener('scroll', function() {
  document.querySelector('.wrap_portfolio').style.transform = `translateX(${window.scrollY}px)`;
});

Чей id хотим найти: const color = 'orange';.

Ищем:

const { id = null } = Object.values(fruits).find(n => n.color === color) || {};

// или

let id = null;
for (const k in fruits) {
  if (fruits.hasOwnProperty(k) && fruits[k].color === color) {
    id = fruits[k].id;
    break;
  }
}

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

А если у меня несколько оранжевых фруктов, как поступить?

Ну, доставайте всё, что есть.

Сразу достаём массив id для какого-то конкретного цвета:

const ids = Object.values(fruits).reduce((acc, n) => (
  n.color === color && acc.push(n.id),
  acc
), []);

Или, сначала группируем данные, а затем можно извлекать массивы id для различных цветов:

function group(data, key, val = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const getVal = val instanceof Function ? val : n => n[val];
  const result = {};

  for (const n of data) {
    const k = getKey(n);
    (result[k] = result[k] || []).push(getVal(n));
  }

  return result;
}

const idsByColor = group(Object.values(fruits), 'color', 'id');

const orangeIds = idsByColor.orange || [];
const greenIds = idsByColor.green || [];

chart.destroy();
chart.config= charts[i];
chart.update();

Это безумие. Вы уничтожили график, и тут же пытаетесь что-то ещё с ним делать.
Труп насиловать не надо, создавайте новый график: chart = new Chart('chart', charts[i]);.

UPD. Например.

state = {
  block1: false,
  block2: false,
}

componentDidMount() {
  setTimeout(() => this.setState({ block1: true }), 3000);
  setTimeout(() => this.setState({ block2: true }), 6000);
}

render() {
  const { block1, block2 } = this.state;
  return (
    ...
      {block1 && <div class="block-1">Блок 1</div>}
      {block2 && <div class="block-2">Блок 2</div>}
    ...
  );
}

UPD. https://jsfiddle.net/jaLgf9w7/

https://jsfiddle.net/6924edvu/

Заменить id на data-атрибут: id="0" ---> data-index="0".
Нет необходимости каждый раз создавать картинку, можно перезаписывать src существующей.

Как добраться до картинки, откуда взять для неё src:

const imgSelector = '#main__display img';
const key = 'index';
const attr = `data-${key}`;
const buttonSelector = `[${attr}]`;

Как достать src, имея на руках элемент с индексом:

const getSrc = el => collect[
  $(el).data(key)
  // или
  $(el).attr(attr)
  // или
  el.dataset[key]
  // или
  el.getAttribute(attr)
  // или
  el.attributes[attr].value
];

Слушаем клики, достаём src, назначаем картинке:

$(buttonSelector).click(function(e) {
  $(imgSelector).attr('src', getSrc(this));
});

// или

$(document).on('click', buttonSelector, e => {
  $(imgSelector).prop('src', getSrc(e.currentTarget));
});

// или

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, function(e) {
  this.setAttribute('src', getSrc(e.currentTarget));
}.bind(document.querySelector(imgSelector)));

// или

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    document.querySelector(imgSelector).src = getSrc(t);
  }
});