0xD34F

Добавим элементам products свойство, которое будет указывать, присутствует ли товар в корзине. Для этого перепишем его следующим образом:

computed: mapState({
  products: state => state.product.all.map(n => ({
    ...n,
    isOrdered: state.order.all.some(m => m.id === n.id),
  })),
}),

Всё, можно блокировать кнопку: <b-button :disabled="product.isOrdered".
И показывать уведомление о покупке: <div v-if="product.isOrdered".

Если же не хотите изменять уже существующее вычисляемое свойство, можно сделать ещё одно:

computed: {
  isOrdered() {
    return Object.fromEntries(this.$store.state.order.all.map(n => [ n.id, true ]));
  },
},

В шаблоне, вместо product.isOrdered из предыдущего варианта, будет isOrdered[product.id].

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

У mapStateToProps есть второй аргумент - props компонента, доставайте id оттуда:

(state, ownProps) => {
  const { projectId } = ownProps.match.params;
  ...
}

Данные уносите в vuex, параметр роута пробрасываете в компонент, в компоненте делаете вычисляемое свойство, где по id будете доставать из хранилища нужный объект.

options: {
  hover: {
    mode: 'nearest',
  },
},

https://jsfiddle.net/zrwjbhfe/

Где ошибки?

В консоли.

Неужели было так сложно открыть её самостоятельно, увидеть там "ReferenceError: ReactDOM is not defined", и осознать, что react не подключен?

Затем, после подключения библиотеки, надо было бы обратить внимание на то, что заголовки вкладок не выделяются - селектор .active недостаточно специфичен. А ещё лучше - надо было сразу скопипастить оригинал как есть, а не пытаться вносить изменения, которых не понимаете.

Не то, чтобы прям ошибка, но индекс в качестве ключа - хуже чем ничего. Зачем его было добавлять? - в оригинале такого не было. Уберите или сделайте нормальные ключи.

document.querySelector('.add-sentence-btn').addEventListener('click', ({ target: t }) => {
  t.closest('.row').querySelectorAll('.hidden').forEach(n => n.classList.remove('hidden'));
  t.classList.add('hidden');
});

можно

могу даже показать как - если исправите свой вопрос так, чтобы он правила перестал нарушать

UPD.

function addClickListeners(buttonsSelector, dialogSelector) {
  const buttons = document.querySelectorAll(buttonsSelector);
  const dialog = document.querySelector(dialogSelector);

  buttons.forEach(n => n.addEventListener('click', e => {
    e.preventDefault();
    dialog.style.display = 'block';
  }));

  dialog.addEventListener('click', ({ target }) => {
    if (target.classList.contains('popup-close')) {
      document.getElementById('name_1').disabled = true;
      document.getElementById('phone_1').disabled = true;
      dialog.style.display = 'none';
    } else if (!target.closest('.popup-content')) {
      dialog.style.display = 'none';
    }
  });
}


addClickListeners('header .contacts a', '.popup-call');
addClickListeners('.sentence-btn', '.popup-discount');
addClickListeners('.check-btn', '.popup-check');

document.addEventListener('click', function(e) {
  const heading = e.target.closest('.panel-heading');
  if (heading) {
    e.preventDefault();
    heading.closest('.panel-group').querySelectorAll('.panel-collapse').forEach(n => {
      n.classList[n === heading.nextElementSibling ? 'toggle' : 'remove']('in');
    });
  }
});

События не срабатывают. Никакие и никогда. Срабатывают обработчики событий.

по какой-то причине срабатывает только первый console.log()

Так, первый, отлично. А второй какой? Это который в componentWillUnmount? Ну так правильно не срабатывает. Когда компонент будет удаляться из DOM - тогда и сработает. Или вы ждёте, что повторно сработает первый? - если так, то это абсурд.

Всё работает так, как и должно. Вы сделайте вывод свойств width и height в render - увидите, что они изменяются при изменении размеров окна (или перенесите console.log в updateDimensions).

function diff(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));
  return Array.prototype.filter.call(data1, n => !keys.has(getKey(n)));
}

// ваш случай
diff(array1, array2, 'name')

// есть и другие варианты применения
diff([ 1, 2, 3, 4, 5 ], [ 1, 2, 3 ]) // [4, 5]
diff('abcde', 'ACE', n => n.toLowerCase()) // ['b', 'd']

Научим компонент работать с директивой v-model.

Добавим параметр value - индекс item'а, который надо показать:

props: {
  value: Number,
  ...

computed: {
  item() {
    return this.items[this.value];
  },
  ...

<transition name="slide-fade" mode="out-in">
  <div class="content" :key="value">
    <h2>{{ item.title }}</h2>
    <p>{{ item.text }}</p>
  </div>
</transition>

Чтобы сменить отображаемый item, будем отправлять в родительский компонент новый индекс:

methods: {
  next(change) {
    const len = this.items.length;
    this.$emit('input', (this.value + change + len) % len);
  },
  ...

<button @click="next(-1)">Prev</button>
<button @click="next(+1)">Next</button>

Ну а в родителе останется связать какое-то из его свойств с экземпляром компонента слайдера:

data: () => ({
  active: 1,
  ...

<v-slider
  v-model="active"
  ...

https://jsfiddle.net/5runc0db/

document.querySelector('input').addEventListener('change', e => {
  const { files: [ file ] } = e.target;
  if (file) {
    const reader = new FileReader();
    reader.onload = e => document.querySelector('img').src = e.target.result;
    reader.readAsDataURL(file);
  }
});

Что, про clearInterval не слышали?

$('.all-blocks.color-blocks .block').attr('id', function(i, id) {
  return $(this).hasClass(id) ? `${id}_2` : id;
});

или

document.querySelectorAll('.all-blocks.color-blocks .block').forEach(n => {
  n.id += n.classList.contains(n.id) ? '_2' : '';
});

Добавляем пунктам select'а атрибут, содержащий координаты города:

<option value="[55.751244,37.618423]">Москва</option>

При выборе пункта достаём значение, дёргаем setCenter:

select.addEventListener('change', function() {
  map.setCenter(JSON.parse(this.value));
});

jsfiddle.net/mjdkchzs

https://jsfiddle.net/Lvknuta1/

display: inline-block; или white-space: nowrap; для li

.active .block {
  border: 1px solid red;
  color: red;
}

.active .under-box-text {
  display: none;
}

.active .invisible {
  display: block;
}

const itemSelector = '.wrapper';
const buttonSelector = '.block, .link';
const activeClass = 'active';

$(itemSelector).on('click', buttonSelector, e => {
  $(e.delegateTarget).toggleClass(activeClass);
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.querySelectorAll(buttonSelector).forEach(m => m.addEventListener('click', this));
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));

// или

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick(e) {
  const button = e.target.closest(buttonSelector);
  if (button) {
    this.classList.toggle(activeClass);
  }
}

// или

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  const item = button && button.closest(itemSelector);
  item && item.classList.toggle(activeClass);
});

{value >= 345 && value <= 500 ? <div>ничего нет</div> : null}

будет ещё больше таких промежутков

Ну тогда делаете массив объектов, которые будут содержать два свойства - массив промежутков (и отдельных значений, если надо) и текст, который надо вывести. И фильтруете его при рендеринге. Как-то так:

const messages = [
  {
    values: [ 1, 2, 4, 8, 16, 32, 64, 128, 256, 512 ],
    message: 'hello, world!!',
  },
  {
    values: [ [ 5, 15 ], [ 100, 200 ], 333, 444, 555 ],
    message: 'fuck the world',
  },
  {
    values: [ [ 50, 150 ], [ 250, 350 ], [ 666, 999 ] ],
    message: 'fuck everything',
  }
];

...

<div>
  {messages
    .filter(n => n.values.some(v => (
      (v instanceof Array && v[0] <= value && value <= v[1]) ||
      v === value
    )))
    .map(n => <div>{n.message}</div>)
  }
</div>