0xD34F

<button class="click-count">click me</button>
<button class="click-count">click me</button>
<button class="click-count">click me</button>

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('click-count')) {
    t.innerText = (t.innerText | 0) + 1;
  }
});

// или

const onClick = e => e.target.textContent = -~e.target.textContent;
document.querySelectorAll('.click-count').forEach(n => n.addEventListener('click', onClick));

Во-первых - почему вместо animate используете attr (gr1/2)?

Во-вторых - почему передаёте функции вместо объектов в animate (path1/2/3/4)?

Исправлено.

если написать в render то он до отрисовки сделает скролл
componentDidMount вообще один раз сработает после отрисовки страницы

Я слышал, будто бы ещё есть какой-то componentDidUpdate - делайте свой скролл в нём.

Есть ощущение, что я что-то в доках базовое пропустил

Может is?

метод animate, например

Что если заменить

.imageContainer:empty {
  height: 0;
  border: none;
}

на

.imageContainer:empty {
  visibility: hidden;
  /* или */
  opacity: 0;
}

??

UPD. Или, добавить box-sizing: border-box; для .imageContainer.

UPD. Или, заменить flex на grid - убрать flex: 0 0 30%; у .imageContainer, а у их родителя пусть будет так:

display: grid;
grid-template-columns: repeat(3, 30%);
justify-content: space-between;

Ну, во-первых не метод, а свойство.

А во-вторых - всё-таки так, undefined. Вы монтируете второй экземпляр Vue внутрь первого. Зачем вам такое могло понадобиться - лично мне фантазии представить не хватает. Первый экземпляр при компиляции конечно же обрабатывает ту часть шаблона, которая по вашей мысли предназначена для второго. Отсюда и ошибки - у первого экземпляра нет тех свойств, которые есть у второго, и которые используются в шаблоне.

Что делать? Ну, первый вариант очевиден - избавьтесь от второго экземпляра Vue, перенесите его данные в первый, или сделайте отдельный компонент - это уж вам виднее. Второй, это если вам вот прям кровь из носу надо чтобы экземпляров было два и один монтировался внутрь другого - используйте v-pre (опасно, если при обновлении внешнего экземпляра окажется затронут элемент, к которому примонтирован внутренний - внутренний экземпляр отвалится).

Добавьте в App:

beforeRouteEnter(to, from, next) {
  if (store.getters.user) {
    next(false)
  } else {
    next()
  }
}

<section id="app-pro">     
      <router-view></router-view>
</section>

new Vue({
  el: '#app-pro',
  render: h => h(AppPro),
  router
}).$mount('#app-pro')

Вы вообще как - понимаете, что тут понаписали? Вопрос риторический - конечно нет, не понимаете. Открываете документацию и читаете - что такое render, el и $mount. Особое внимание обращаете вот на этот фрагмент:

The render function has priority over the render function compiled from template option or in-DOM HTML template of the mounting element which is specified by the el option.

Вот вы вроде бы в курсе, что стейт не следует менять напрямую - а тем не менее это делаете.

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

Делайте копию массива перед splice'ом, и сам splice выполняйте над копией - так же, как push при добавлении элемента.

Кстати, о добавлении - почему у вас там в код метода зашита константа в качестве нового id? Нажали "добавить" два раза - вот и два элемента с одинаковыми id. Неужели так трудно было сгенерировать уникальный? Например.

unix time

Можно повесить обработчик на событие load (нативное, сам компонент событий не генерирует). В обработчике надо проверить, что e.target.src правильный - потому что событие возникает дважды, первый раз при показывании заглушки, второй - когда загружена настоящая картинка. Как-то так.

не могу определить откуда эти ошибки

Почитайте.

И ещё это и это - показанная ошибка не единственная ваша проблема.

Ну и в целом непонятно - зачем тут нужны регулярные выражения. Можно же использовать explode.

ну, например:

foreach ($obj_guild['members'] as $m) {
  $username = $m['user']['username'];
  echo "$username - будет расстрелян<br>";
}

Есть 3 блока, которые хранятся в массиве
let block = document.querySelectorAll(".block");

NodeList - это не массив.

const index = Array.prototype.indexOf.call(block, e.target);

или

const index = [...block].findIndex(n => n === e.target);

или

let index = block.length;
while (index-- > 0 && block[index] !== e.target) ;

$('blockquote').html((i, html) => html.replace(/(©)(.*)$/, '$1<cite>$2</cite>'));

или

const el = document.querySelector('blockquote');
const html = el.innerHTML;
const index = html.indexOf('©') + 1;
el.innerHTML = `${html.slice(0, index)}<cite>${html.slice(index)}</cite>`;

или

const el = document.querySelector('blockquote');
el.innerHTML = el.innerHTML
  .split('©')
  .map((n, i) => i ? '<cite>' + n + '</cite>' : n)
  .join('©');

выдаёт неправильную дату

А чем она неправильна? Я бы предположил, что проблема здесь:

let ts = 1539338750;

Какое-то подозрительно небольшое число. Порядка так на три меньше, чем надо - если речь идёт о датах околосегодняшних. Может, вы секунды и миллисекунды перепутали?

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

data: () => ({
  items: [
    { title:  'hello, world!!' },
    { title:  'fuck the world' },
    { title: 'fuck everything' },
  ].map(n => (n.counter = 0, n)),
}),

<div v-for="n in items">
  <button @click="n.counter++">{{ n.title }}</button>
  <span>total: {{ n.counter }}</span>
</div>

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

function movie(card, ticket, perc) {
  let count = 0;
  let price = ticket;
  let sum = card;

  while (Math.ceil(sum) >= ticket * count) {
    count++;
    price *= perc;
    sum += price;
  }

  return count;
}

"User.comparePassword is not a function"

UserSchema.methods.comparePasswords =

Так как на самом деле метод должен называться, в каком числе пароли должны быть - в единственном, или во множественном? Вы уж определитесь. Или вы не видите разницы между comparePassword и comparePasswords?