0xD34F

Про всплытие событий слышали?

Обработчик клика на .modal-close не нужен - его убираем; добавляем проверку, кем является целевой элемент:

$('.modal-window').click(function(e) {
  if (e.target.matches('.modal-window, .modal-close')) {
    $(this).hide();
  }
});

А более полный вариант кода можно увидеть? Где вы определяете setCenterFunc? - судя по тому, что вы показали, она явно не в methods лежит.

Куда, что и в каком количестве надо добавить:

const container = document.querySelector('.dots-wrapper');
const tag = 'div';
const className = 'dot';
const count = 10;

Можно пойти двумя путями:

• Первый - собирание разметки. Для одного элемента она будет выглядеть так:
  
  

  const elementHTML = `<${tag} class="${className}"></${tag}>`;

  
  Чтобы её размножить, есть варианты:
  
  

  const elementsHTML = Array(count).fill(elementHTML).join('');
  // или
  const elementsHTML = Array(count + 1).join(elementHTML);
  // или
  const elementsHTML = elementHTML.repeat(count);

  
  Добавляем:
  
  

  container.innerHTML = elementsHTML;
  // или
  container.insertAdjacentHTML('beforeend', elementsHTML);

  
  
• Второй - создание элементов напрямую. Тут тоже есть разные варианты:
  
  

  for (let i = 0; i < count; i++) {
    const element = document.createElement(tag);
    element.classList.value = className;
    container.insertAdjacentElement('beforeend', element);
  }

  
  или
  
  

  while (container.children.length < count) {
    const element = document.createElement(tag);
    element.classList.add(className);
    container.appendChild(element);
  }

  
  или
  
  

  const element = document.createElement(tag);
  element.className = className;
  container.append(...Array.from({ length: count }, () => element.cloneNode()));

  
  

И здесь idUser не работает, только после перезагрузки страницы.

Ну так наверное надо бы на страницу Feed переходить после того, как пользователь будет сохранён в localStorage. Т.е., this.$router.push({name: 'feed'}) следует выполнять в колбеке запроса получения данных пользователя.

Также, почему-то я не могу получить из localstorage 'user' - пишет '[object Object]'.

Неудивительно. Ведь это объект. При сохранении в localStorage делайте JSON.stringify, а когда достаёте - JSON.parse.

Свойство checked сделать массивом, который будет содержать состояния чекбоксов. Сами чекбоксы на основе этого массива и создавать, через v-for. Слушать событие change, по которому выставлять состояния предыдущих чекбоксов (относительно того, на котором событие случилось) в true, следующих в false:

data: () => ({
  checked: [ 0, 0, 0, 0, 0 ],
}),
methods: {
  onChange(e, index) {
    const checked = e.target.checked;

    this.checked = [
      ...Array(index + checked).fill(1),
      ...Array(this.checked.length - index - checked).fill(0),
    ];
  },
},

<li v-for="(n, i) in checked">
  <label>
    <input
      type="checkbox"
      :checked="n"
      @change="onChange($event, i)"
    >
    {{ i + 1 }}
  </label>
</li>

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

а если несколько таких списков будет

Очевидно, нужен отдельный массив checked для каждого списка (если только вы не хотите, чтобы все списке выглядели одинаково). Что касается функции onChange, то надо будет добавить ей дополнительный параметр - чтобы была возможность указывать, с каким именно списком в данный момент идёт работа.

https://jsfiddle.net/9ba682w4/

Ищем готовое или реализовываем самостоятельно:

function throttle(f, delay) {
  let lastCall = -Infinity;

  return function() {
    const now = +new Date;
    if (now - lastCall > delay) {
      lastCall = now;
      return f.apply(this, arguments);
    }
  };
}

Так?

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',.