0xD34F

Возвращайте this из всех методов. Кроме getResult, конечно.

Вызывая метод text, вы затираете содержимое элемента. Чтобы не терять ранее добавленный контент, добавляйте текст в отдельный элемент. Например.

В обработчике create забыли указать параметры. Один из которых пытаетесь использовать. Соответственно, после того, как первый слайдер инициализирован, вызывается его обработчик create, который падает с ошибкой, а ошибка никак не ловится. Ну и всё, гейм овер.

Замените create: function() { на create: function(e, ui) {.

document.querySelector('.nav__list').addEventListener('click', function(e) {
  const sub = e.target.nextElementSibling;
  if (sub && sub.classList.contains('nav__sublist')) {
    sub.classList.toggle('nav--show');
  }
});

<input type="date" v-model="years.start">
<input type="date" v-model="years.end">
<div v-for="n in months">
  <h3>{{ n.year }}, {{ n.name }}</h3>
  <div>{{ n.days }}</div>
</div>

data: () => ({
  years: {
    start: null,
    end: null,
  },
}),
computed: {
  months() {
    const start = moment(this.years.start).startOf('month');
    const end = moment(this.years.end).endOf('month');
    const months = [];

    for (; start < end; start.add(1, 'day')) {
      const [ year, name, day ] = start.format('YYYY.MMMM.D').split('.');
      if (day === '1') {
        months.push({
          year,
          name,
          days: [],
        });
      }
      months[months.length - 1].days.push(+day);
    }

    return months;
  },
},

Сделайте отдельные компоненты под страну, провинцию и город. Как-то так. Каждый из компонентов непосредственно выводит данные только своего уровня, а остальное передаёт в другой компонент.

preg_match_all('/(?<=счету )\d+/iu', $str, $matches);
echo implode(', ', $matches[0]);

UPD.

А если строка СЧЕТУ 555 ОТ 01.01.2019, 556 ОТ 01.01.2019
т.е. второй раз слова "счету" нет?

preg_match_all('/\d+(?= от \d{2}\.\d{2}\.\d{4})/iu', $str, $matches);

отследить появление содержимого блока

MutationObserver

Это если нужный блок почему-то находится за пределами корневого элемента вашего приложения. Если же внутри - делайте watch на свойство отвечающее за содержимое блока.

UPD. Набросал примерчик - отслеживание внешнего элемента через MutationObserver, запись значения в Vuex.

Решили попробовать скрывать родительский контейнер компонента через класс с display: none, отрисовывать в скрытый и в mounted снимать скрывающий класс

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

array_splice($arr, 2, 0, 'Груши');

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

А если мы не знаем порядковый номер нового элемента, но знаем после какого элемента будет стоять новый, то как быть?

array_splice($arr, array_search('Виноград', $arr) + 1, 0, 'Груши');

Обновить существующий объект:

for (const k in obj) {
  obj[k] = Object.values(obj[k]);
}

Собрать новый:

const newObj = Object
  .keys(obj)
  .reduce((acc, k) => (acc[k] = Object.values(obj[k]), acc), {});

// или

const newObj = Object.fromEntries(Object
  .entries(obj)
  .map(n => [ n[0], Object.values(n[1]) ])
);

const ul = document.querySelector('#ul');
const button = document.querySelector('#but');

Никаких циклов не надо, достаточно посмотреть сколько уже есть элементов и сделать плюс один:

ul.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.textContent += '!';
  }
});

button.addEventListener('click', function() {
  const li = document.createElement('li');
  li.textContent = `пункт ${ul.children.length + 1}`;
  ul.appendChild(li);
});

или

ul.addEventListener('click', ({ target: t }) => t.matches('li') && t.append('!'));

button.addEventListener('click', () => {
  ul.insertAdjacentHTML('beforeend', `<li>пункт ${-~ul.children.length}</li>`);
});

не срабатывают case, всегда default

Всё-таки срабатывают.

Почему default случается когда вроде бы не должен - потому что у двух последних case'ов отсутствует break, соответственно, при их выполнении выполняется и default, идущий в самом конце.

Почему вы не видите эффекта от выполнения кода внутри case'ов - да потому что нечего видеть. Вы скопировали значение свойства display в переменную, и эта копия уже никакого отношения к оригиналу не имеет, что бы вы с ней не делали, это никак не отразится на элементе. Чтобы элемент изменился, надо новые значения назначать его свойствам. Но, конечно, не напрямую, а так, как это принято в react'е - заводите в компоненте стейт, на основе значений из стейта в методе render устанавливаете свойства элементам, когда хотите их изменить, обновляете стетйт.

Ещё пара моментов, которые стоит упомянуть:

Почему у вас li вложен в div? Разберитесь, какие элементы куда можно вкладывать, а куда нельзя.

Зачем два одинаковых обработчика клика? Второй, который у li, он не нужен - делает ровно то же, что и первый. Потому что... Почитайте, что такое всплытие событий.

.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

map.panes.get('ground').getElement().classList.add('gray');

https://jsfiddle.net/8y0t6kjv/

async function processData(data, process, chunkSize, delay) {
  let i = -1;
  for (const n of data) {
    if (++i === chunkSize) {
      i = 0;
      await new Promise(r => setTimeout(r, delay));
    }
    process(n);
  }
}


processData(Array(10).keys(), console.log, 3, 1500).then(() => console.log('DONE'));

Object.entries + деструктуризация:

for (const [ index, el ] of Object.entries(elems)) {
  ...

Надо только иметь в виду, что тут index будет строкой. Чтобы получать числа, можно позаимствовать метод entries у Array или NodeList:

for (const [ index, el ] of Array.prototype.entries.call(elems)) {
  ...

Или, превращать получаемую HTMLCollection в массив:

const elems = [...document.getElementsByClassName('one')];
for (const [ index, el ] of elems.entries()) {
  ...

Или, для получения элементов вместо getElementsByClassName использовать querySelectorAll, возвращающий NodeList:

const elems = document.querySelectorAll('.one');
for (const [ index, el ] of elems.entries()) {
  ...

Object.values(names.reduce((acc, n) => {
  const g = /^\d/.test(n[0]) ? n[0] : /^[А-Я]/i.test(n[0]) ? 'А-Я' : null;
  g && (acc[g] = acc[g] || [ g ]).push(n);
  return acc;
}, {}))

А может не надо рендерить компонент, пока данные не пришли? Тогда и undefined передаваться не будет.

<app-analytics-chart v-if="analytics.countOrdersByMonth"

Фильтруемым элементам добавить обёртку <div class="items"></div>.

Значениями option'ов пусть будут селекторы элементов, которые должны оказаться видимыми:

<select>
  <option value="*">Все</option>
  <option value=".red">Красные</option>
  <option value=".blue">Синие</option>
  <option value=".green">Зеленые</option>
</select>

Фильтрация:

$('select').change(function() {
  const selector = this.value;
  const $items = $('.items >');
  $items.filter(selector).slideDown();
  $items.not(selector).slideUp();
});

Состояние хранится в родителе, через параметры передаётся в дочерние компоненты. Из дочерних компонентов эмитятся события, по которым в родителе осуществляется обновление состояния.

UPD. Например.