0xD34F

Сделайте кастомный фильтр, с обработчиками onChange и onKeyPress, в которых и будет происходить переключение функции фильтрации. Например, так (поле lastName, посмотреть в деле можно вбивая короткие слова, которые являются частью более длинных - такие как war, son, comb, sign, child, work, can и т.п.).

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

у меня много столбцов, плюс к этому много таблиц, и логику фильтра нужно применить ко всему

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

UPD. https://codesandbox.io/s/nn1z53jn4l (только первые три поля, у последнего фильтр оставлен переопределённым).

Продублировать option'ы. Первый в каждой из полученных пар будет содержать текст, отображаемый в качестве выбранного, при этом сам он должен быть скрыт, чтобы не отображаться в выпадающем списке. При выборе следует присвоить select'у его текущее значение, чтобы выбранным option'ом (т.е. тем, чей текст будет показан в select'е) вместо видимого второго оказался скрытый первый.

select.innerHTML = [
  { val:  69, optionText:  'hello, world!!', selectText:  'HELLO, WORLD!!' },
  { val: 187, optionText:  'fuck the world', selectText:  'FUCK THE WORLD' },
  { val: 666, optionText: 'fuck everything', selectText: 'FUCK EVERYTHING' },
].map(n => `
  <option value="${n.val}" hidden>${n.selectText}</option>
  <option value="${n.val}">${n.optionText}</option>
`).join('');

select.addEventListener('change', e => e.target.value = e.target.value);

Откуда и куда копируем:

const source = document.querySelector('.menu');
const target = document.querySelector('#parent');

• Вариант раз - cloneNode.
  
  Можно перебирать элементы и копировать их по одному:
  
  

  for (const n of source.children) {
    target.appendChild(n.cloneNode(true));
  }
  
  // или
  
  source.querySelectorAll(':scope > *').forEach(n => {
    target.insertAdjacentElement('beforeend', n.cloneNode(true));
  });

  
  А можно скопировать их родителя:
  
  

  // вложенные узлы копии добавляем в целевой элемент
  target.append(...source.cloneNode(true).children);
  
  // или, заменяем целевой элемент копией исходного
  target.replaceWith(source.cloneNode(true));

  
  
• Вариант два - копируем не сами элементы, а разметку:
  
  

  target.innerHTML = source.innerHTML;
  
  // или
  
  target.outerHTML = source.outerHTML;

  
  

function getDate(day, year = new Date().getFullYear()) {
  const date = new Date(year, 0, day);
  return [
    date.getDate(),
    [
      'январь', 'февраль', 'март', 'апрель', 'май', 'июнь',
      'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'
    ][date.getMonth()],
    [ 'вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб' ][date.getDay()],
  ].join(' ');
}


getDate(115, 2019) // "25 апрель чт"

или

const getDate = (day, year = new Date().getFullYear()) =>
  new Date(year, 0, day).toLocaleString('ru-RU', {
    day: 'numeric',
    month: 'long',
    weekday: 'short',
  });


getDate(115, 2019) // "чт, 25 апреля"

Останавливайте всплытие события при клике на .close-panel, чтобы только что удалённый класс не добавлялся обратно (при обработке события в родительском элементе):

$('.close-panel').on('click', function(e) {
  e.stopPropagation();
  $('.add-caption').removeClass('active');
});

Или, уберите отдельный обработчик клика по .close-panel, а в обработчике клика по .add добавляйте или убирайте класс в зависимости от того, откуда пришло событие:

$('.add').on('click', function(e) {
  $('.add-caption').toggleClass('active', !$(e.target).hasClass('close-panel'));
});

через ref:

<button @click="$refs.child.someMethod()">call child method</button>
<child-component ref="child"></child-component>

text.match(/8 \(495\) \d{3}-\d{2}-\d{2}/g)

const toDelX = new Set;
const toDelY = new Set;

X.forEach((n, i) => {
  if (X2.includes(n) && Y2.includes(Y[i])) {
    toDelX.add(n);
    toDelY.add(Y[i]);
  }
});

X2.splice(0, X2.length, ...X2.filter(n => !toDelX.has(n)));
Y2.splice(0, Y2.length, ...Y2.filter(n => !toDelY.has(n)));

isLoaded: false,

if (!isloaded) {

Так как всё-таки правильно - Loaded или loaded?

UPD. Исправлено.

Но как снять эту прослушку потом в unbind?

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

Самый простой вариант - цеплять его к элементу в качестве свойства:

bind(el, options) {
  const handler = () => { ... };
  window.addEventListener('scroll', handler);
  el.scrollHandler = handler;
},
unbind(el) {
  window.removeEventListener('scroll', el.scrollHandler);
},

Или можно использовать Map для хранения обработчиков - ключами будут элементы. Надо только не забыть в unbind в дополнение к снятию обработчика удалять его так же и из Map'а (ну или вместо Map используйте WeakMap).

А вообще, есть и другой путь - так как обработчики вы подключаете к window, на самом деле достаточно одного обработчика сразу для всех элементов: вешаете его при загрузке страницы; опять же, будет Map, элементы в качестве ключей, значениями будут объекты, содержащие в себе options.value, options.arg и что там ещё будет нужно; в обработчике обходите Map, скрываете/показываете элементы:

const map = new Map();

window.addEventListener('scroll', function(e) {
  [...map.entries()].forEach(([ el, { className, deleteClass } ]) => {
    ...
  });
});

bind(el, options) {
  map.set(el, {
    className: options.value,
    deleteClass: options.arg === 'delete',
  });
},
unbind(el) {
  map.delete(el);
},

let autoplayInterval = null;

function startAutoplay() {
  if (!autoplayInterval) {
    autoplayInterval = setInterval(plusSlide, 1000);
  }
}

function stopAutoplay() {
  clearInterval(autoplayInterval);
  autoplayInterval = null;
}

Object.entries(a).reduce((acc, [ k, v ]) => acc + (b[k] === v), 0)

Думаю, вместо клепания собственного велосипеда, будет лучше воспользоваться каким-нибудь готовым компонентом.

$keys = array_keys($auto);

$header = implode("", array_map(function($n) {
  return "<th>$n</th>";
}, $keys));

$rows = implode("", array_map(function($i) use($auto, $keys) {
  return "<tr>".implode("", array_map(function($n) use($auto, $i) {
    return "<td>".$auto[$n][$i]."</td>";
  }, $keys))."</tr>";
}, range(0, count($auto[$keys[0]]) - 1)));

echo "<table>$header$rows</table>";

Раз уж у вас предполагается возможность одновременного поиска по различным странам/регионам - как-то странно пытаться использовать одно и то же свойство для всех полей поиска. Сами подумайте - свойство одно, стран двадцать (например). Как вы собираетесь хранить двадцать значений в одной строковой переменной?

Сделайте строки поиска свойствами объектов, внутри которых выполняете поиск. Т.е., замените

v-model="searchRegion"

на

v-model="country.searchRegion"

Аналогично и с городами внутри регионов.

Или можно сделать searchRegion и searchCity объектами, где ключами будут id стран/регионов, в которых осуществляется поиск. Как-то так.

Добавьте в компонент свойство, которое будет содержать ширину экрана; при создании экземпляра компонента подписывайтесь на события изменения размеров экрана, в обработчике обновляйте свойство компонента:

data: () => ({
  width: 0,
}),
created() {
  const onResize = () => this.width = window.innerWidth;
  onResize();
  window.addEventListener('resize', onResize);
  this.$on('hook:beforeDestroy', () => window.removeEventListener('resize', onResize));
},

https://jsfiddle.net/ma367d5w/

Это если, как вы сказали, "постоянно отслеживать". Но судя по показанному коду, вам надо несколько иное - знать, как ширина экрана соотносится с определённым значением, больше/меньше. Так что отслеживать все изменения ширины необходимости нет:

data: () => ({
  isWidthOK: false,
}),
created() {
  const mql = window.matchMedia('(max-width: 600px)');
  const onChange = () => this.isWidthOK = mql.matches;
  onChange();
  mql.addEventListener('change', onChange);
  this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},

https://jsfiddle.net/ma367d5w/1/

Что значит "как axisTop"? Разница между axisBottom и axisTop не в месте, где они отрисовываются, а в расположении подписей - снизу или сверху от оси. Хотите, чтобы ось располагалась внизу - сдвиньте её с помощью transform.

that.history = response.data.result
that.scrollToEnd()

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

Делаете функцию для вычисления среднего по одному месяцу:

function getMonthAverage($data, $month) {
  $monthData = array_filter(array_column($data, $month), function($n) {
    return $n > 0;
  });
  $count = count($monthData);

  return $count ? array_sum($monthData) / $count : 0;
}

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

$juneAverage = getMonthAverage($data, 'june');

UPD. Или можно посчитать сразу по всем месяцам:

$allAverage = array_reduce(array_keys($data[0]), function($acc, $n) use($data) {
  $acc[$n] = getMonthAverage($data, $n);
  return $acc;
}, []);