0xD34F

Так?

UPD. Как победить тормоза при большом интервале значений. Можно работать с интервалом, который не будет вызывать тормозов - уменьшить границы в 100 раз, например. А в полях ввода показывать настоящие значения. Ну а то, что таким образом станет заведомо невозможной точная настройка значений посредством слайдера - так она в любом случае невозможна для больших интервалов. В общем, вот примерчик того, как это можно сделать.

UPD. В более поздних версиях рендеринг был переделан, больше никаких тормозов.

https://jsfiddle.net/2xdvq7dL/1/

Так, что ли?

Можно использовать bind:

setTimeout(function() {
  console.log(this.resorts.join(', '));
}.bind(this), delay);

Или в переменную сохранить текущий контекст до вызова setTimeout и использовать её вместо this:

var that = this;
setTimeout(function() {
  console.log(that.resorts.join(', '));
}, delay);

Миксины.

<button data-block="block-one">69</button>
<button data-block="block-two">187</button>
<button data-block="block-three">666</button>

<div class="block block-one">hello, world!!</div>
<div class="block block-two">fuck the world</div>
<div class="block block-three">fuck everything</div>

$('body').on('click', 'button', function() {
  const $block = $(`.${this.dataset.block}`).toggleClass('show');
  $('.block').not($block).removeClass('show');
});

// или

document.addEventListener('click', ({ target: { dataset: { block } } }) => {
  if (block) {
    document.querySelectorAll('.block').forEach(({ classList: cl }) => {
      cl[cl.contains(block) ? 'toggle' : 'remove']('show');
    });
  }
});

или

<button class="button">69</button>
<button class="button">187</button>
<button class="button">666</button>

<div class="block block-one">hello, world!!</div>
<div class="block block-two">fuck the world</div>
<div class="block block-three">fuck everything</div>

const $blocks = $('.block');
const $buttons = $('.button').click(function() {
  const $block = $blocks.eq($buttons.index(this)).toggleClass('show');
  $blocks.not($block).removeClass('show');
});

// или

const blocks = document.querySelectorAll('.block');
const buttons = document.querySelectorAll('.button');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(buttons, this);
  blocks.forEach((n, i) => n.classList[i === index ? 'toggle' : 'remove']('show'));
}

Потому что this внутри метода toggle - это не экземпляр vue. Не надо всюду пихать стрелочные функции.

Замените toggle: () => { на toggle() {.

Загоняем #article-1 в самый конец .content, по умолчанию делаем его видимым, и невидимым если до него есть .article:target. Типа так.

html += '<li onclick="location.href=\'' + product.url + '\'">';

или

html += `<li onclick="location.href='${product.url}'">`;

Замените обычную функцию на стрелочную:

fs.open(fname, 'a', (err, file_handle) => {
  if (!err)
    this.file_handle = file_handle;

Или bind используйте. Или можете до вызова fs.open сохранить текущий контекст в переменную, и использовать её внутри коллбека вместо this.

this.dataCalendar.curMonth++

this.dataCalendar.curYear--

Страшно на такое смотреть. И ещё эти условия - curMonth < 11, curMonth > 0... Изменился месяц - надо поменять день (или не надо?), надо поменять год (или не надо - по-всякому бывает), поменять ещё чёрт знает что. Увеличили день - надо менять месяц, если это 30/31 число, иногда год - если было 31 декабря. Ну и т.д. и т.п.

Почему бы непосредственно не изменять ТОЛЬКО свойство даты - а все остальные пусть пересчитываются при изменении curDate? Вместо curMonth++ будет что-то вроде

curDate = new Date(curDate.setMonth(curDate.getMonth() + 1))

А остальные свойства из обычных станут вычисляемыми:

computed: {
  calendarData() {
    return {
      year: this.curDate.getFullYear(),
      month: this.curDate.getMonth(),
      // ...
    };
  }
}

Вместо

$('#given1').on('change', 'select', function(){
  addNewSelect();
});

должно быть

$('#given1').on('change', 'select', addNewSelect);

Ну и второй обработчик аналогично. Кстати, их можно объединить - допускается указывать несколько имён событий, разделив их пробелом. Типа так: .on('change blur',.

Делайте так:

$checkValue = function($arrPostKey, $value) use(&$errors) {

Или так:

function checkValue($arrPostKey, $value, &$errors) {

Или так:

function checkValue($arrPostKey, $value) {
  global $errors;

Режем введённую пользователем строку на куски:

const termParts = term.trim().toLowerCase().split(/\s+/);

Проверяем наличие каждой части:

if (termParts.every(n => data[i][0].toLowerCase().includes(n))) {

Часть начального кода с v-for я пропустил.

Это зря - непонятно, что такое date и types.

Предположу, что вам следует заменить это:

types.id == date.activities[i].type_id

на вот это:

date.activities.every(n => n.type_id == types.id)

Сложить пары "текст кнопки / имя класса" в объекты, объекты в массив, массив сделать свойством компонента:

data: () => ({
  items: [
    { buttonText: '+', className: 'container' },
    { buttonText: '-', className: 'container-fluid' },
  ],
  ...
}),

На основе этого массива создавать кнопки:

<button
  v-for="n in items"
  v-text="n.buttonText"
  :class="{ active : active === n.className }"
  @click="active = n.className"
></button>

Похоже на то, к чему вы стремились?

<div :class="isActive ? 'newClass' : 'menu-contain'">

<div :style="{ 'background-image': `url(${Avatar.ClassIcon})` }"></div>

Понадобятся два свойства - номер текущей страницы (page) и количество элементов на странице (perPage). Имея эти значения, можно показать элементы текущей страницы (UPD. Тут, конечно, косяк - items.slice... надо было унести в computed):

<div v-for="item in items.slice((page - 1) * perPage, page * perPage)">
  {{ item }}
</div>

Также вычислим общее количество страниц:

computed: {
  numPages() {
    return Math.ceil(this.items.length / this.perPage);
  },
},

Оно понадобится для того, чтобы ограничить возможный переход к несуществующим страницам:

methods: {
  next(change) {
    this.page = Math.max(1, Math.min(this.numPages, this.page + change));
  },
},

И чтобы блокировать кнопку перехода к следующей странице, когда таковой нет:

<button @click="next(-1)" :disabled="page <= 1">prev</button>
<button @click="next(+1)" :disabled="page >= numPages">next</button>

https://jsfiddle.net/7a1w62xm/1/