0xD34F

Консоль говорит, что не может найти product, потому что я не правильно использую хуки.

Нет. Консоль вам говорит что-то другое.

Вот эта вот строка,

var prod = product;

- что вы хотели ею сказать? Что ещё за product? Это который в data лежит? Тогда должно быть this.product. Почему вы пытаетесь определить переменную с таким же именем как и у параметра? А при вызове в хуке mounted - почему ничего не передаёте в метод results, у него же определён параметр?

Думаю, должно быть так: строку, процитированную выше - просто удаляете, а в mounted при вызове results передавайте ему product - this.results(this.product). Или так: строку удаляете, удаляете параметр prod, в вызове axios.get вместо prod используете this.product.

Пусть за видимость всплывающего сообщения отвечает не свойство, а параметр, значение которого будет назначаться в зависимости от равенства индекса текущего элемента индексу активного. При клике эмитите событие, в родительском компоненте это событие ловите, соответствующим образом изменяете индекс активного элемента. На всё про всё - пара строк. Как-то так.

Собираем массив с днями:

const days = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];

// или

const days = Array.from({ length: 7 }, (_, i) => new Date(1, 0, i)
  .toLocaleString('ru', { weekday: 'long' })
  .replace(/./, m => m.toUpperCase()
));

Зацикливаем вывод:

for (
  let iDay = 0;
  confirm(`${days[iDay]}. Хотите увидеть следующий день?`);
  iDay = (iDay + 1) % days.length
) ;

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

"Производительно" далеко не всегда значит "лучше". Бывает так, что производительностью можно пренебречь в пользу краткости и читаемости (шутка, являются ли варианты ниже более читаемыми, вопрос спорный). Код - он не только для компьютеров, но и для людей.

Вот, смотрите - одна строка вместо шести ваших:

const lastId = arr.reduce((id, n) => n.glob_id || id, null);
// или
const lastId = (arr.filter(n => n.glob_id).pop() || {}).glob_id;
// или
const lastId = ([...arr].reverse().find(n => n.glob_id) || {}).glob_id;
// или
const lastId = arr.map(n => n.glob_id).filter(Boolean).pop();

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

let lastId = null;
for (let i = arr.length; i--;) {
  if (arr[i].glob_id) {
    lastId = arr[i].glob_id;
    break;
  }
}

UPD. Наконец-то подъехал метод, позволяющий решить задачу и коротко, и без стояния на голове. И трёх с половиной лет ждать не пришлось:

const lastId = arr.findLast(n => n.glob_id)?.glob_id;

list1.sort(key=lambda e: e[0])

<div id="map" class="black-and-white"></div>

.black-and-white {
  filter: grayscale(100%);
}

document.querySelector('#map').addEventListener('click', function() {
  this.classList.remove('black-and-white');
}, { once: true });

jsfiddle.net/0uays3d7

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

const parentSelector = 'div';
const childSelector = 'p';
const className = 'there';

const siblingsSelector = `${parentSelector} > ${childSelector}`;
const elementSelector = `${siblingsSelector}.${className}`;

Дальше есть варианты:

const index = Array.prototype.findIndex.call(
  document.querySelectorAll(siblingsSelector),
  n => n.classList.contains(className)
);

или

let index = -1;
for (
  let el = document.querySelector(elementSelector);
  el;
  index++, el = el.previousElementSibling
) ;

или

const el = document.querySelector(elementSelector);
const index = el ? [...el.parentNode.children].indexOf(el) : -1;

Если вдруг у элемента могут быть другие соседи, не соответствующие childSelector, и они не должны учитываться, то третий вариант не подходит, а во втором надо заменить index++ на index += el.matches(childSelector).

document.addEventListener('keypress', function(e) {
  if (e.keyCode === 32) {
    console.log('space pressed');
  }
});

document.addEventListener('wheel', function(e) {
  const event = new Event('keypress');
  event.keyCode = 32;
  document.dispatchEvent(event);
});

Вместо того, чтобы создавать отдельные переменные под каждый набор данных, просто обходите массив series с помощью forEach. Надо ли перерисовывать график сразу, как только в какой-либо из наборов данных добавлена новая точка - не уверен. Лично я бы дожидался получения новых данных по всем наборам и только потом делал перерисовку. Конечно, если хотите, перерисовывать можно и при каждом получении новых данных.

Также следует обратить внимание на ваш выбор использовать setInterval для организации постоянного обновления - что если один из запросов займёт сильно больше времени, чем вы ожидаете? Не получится ли так, что более новые данные будут добавлены раньше старых? Возможно, стоит делать так: запрос, по получении ответа - setTimeout на следующий запрос.

Что до

работает, но не всегда корректно <...> точно есть ошибки

- это разговор ни о чём. Информации примерно ноль. Вам следовало рассказать, как проявляется эта некорректность.

Вариантов тут несколько:

• Так как значения у вас парные - измените структуру БД, пусть оба значения лежат в одной строке
  
• Путь дурака: два запроса в PHP и ручное объединение их результатов - цикл по первому массиву, вложенный цикл по второму, как встретился элемент с таким же значением time, его value добавляется в элемент из первого массива
  
• Получить данные одним запросом:
  

  SELECT t1.time, t1.value AS temp_val, t2.value AS hum_val
  FROM topics t1
  JOIN topics t2 ON t2.time = t1.time
  WHERE
    t1.topic = 'tempinroom' AND
    t2.topic = 'huminroom'

  
  

при вводе каждого символа с поля слетает фокус

Потому что при изменении значения поле создаётся заново - ведь вы в качестве key это значение и указали. Что само по себе является дичью несусветной, кроме того, так у вас могут быть поля с одинаковыми key.

Генерируйте уникальные значения для key в момент добавления нового элемента в массив company_ids. Если удаление элементов из массива не предполагается, это может быть просто количество элементов / индекс элемента в массиве:

this.form.company_ids.push({
  key: this.form.company_ids.length,
});

В противном случае можно сделать в компоненте свойство, значение которого будет при каждом добавлении увеличиваться:

this.form.company_ids.push({
  key: ++this.currKey,
});

Или можно брать текущее максимальное значение key + 1:

this.form.company_ids.push({
  key: Math.max(0, ...this.form.company_ids.map(n => n.key)) + 1,
});

Где элементы находятся, и сколько с какого конца надо удалить:

const selector = 'div p';
const removeFromStart = 5;
const removeFromEnd = 3;

Удаляем:

document.querySelectorAll(selector).forEach((n, i, a) => {
  if (i < removeFromStart || i > a.length - removeFromEnd - 1) {
    n.remove();
  }
});

Или, если родитель действительно общий, то можно и так:

document.querySelectorAll([
  `${selector}:nth-child(-n+${removeFromStart})`,
  `${selector}:nth-last-child(-n+${removeFromEnd})`,
]).forEach(n => n.outerHTML = '');

Добавить input'у атрибуты min/max; всем трём элементам добавить общую обёртку (уверен, на странице подобных блоков будет больше одного):

<div class="counter">
  <button class="minus">-</button>
  <input type="number" min="2" max="17" value="5">
  <button class="plus">+</button>
</div>

При обновлении input'а ограничивать новое значение значениями атрибутов min/max (если где-то ограничений быть не должно, то вместо отсутствующих значений атрибутов подставлять +/- бесконечность). Кроме того, неплохо бы обрабатывать пользовательский ввод в input - а ну как кто захочет его напрямую отредактировать, мимо кнопок.

Как это может выглядеть:

const updateInput = change => e =>
  $('input', e.delegateTarget).val(function(i, v) {
    const min = this.min || -Infinity;
    const max = this.max || Infinity;
    return Math.max(min, Math.min(max, (v | 0) + change));
  });

$('.counter')
  .on('click', '.minus', updateInput(-1))
  .on('click', '.plus', updateInput(1))
  .on('input', updateInput(0));

Или, к чёрту jquery:

const updateInput = change => e => {
  const input = e.target.closest('.counter').querySelector('input');
  const min = input.min || -Infinity;
  const max = input.max || Infinity;
  input.value = Math.min(max, Math.max(min, (input.value | 0) + change));
};

document.querySelectorAll('.counter').forEach(function(n) {
  n.querySelector('.minus').addEventListener('click', this[0]);
  n.querySelector('input').addEventListener('input', this[1]);
  n.querySelector('.plus').addEventListener('click', this[2]);
}, [ -1, 0, 1 ].map(updateInput));

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

document.addEventListener('click', ({ target: t }) => {
  const change =
    t.classList.contains('plus')  ? +1 :
    t.classList.contains('minus') ? -1 :
                                     0;
  if (change) {
    const input = t.closest('.counter').querySelector('input');
    input.value -= -change;
    input.dispatchEvent(new Event('input'), { bubbles: true });
  }
});

document.addEventListener('input', ({ target: t }) => {
  if (t.closest('.counter')) {
    t.value = Math.min(t.max || Infinity, Math.max(t.min || -Infinity, t.value | 0));
  }
});

А ещё можно добавить кнопкам data-атрибуты, указывающие, на сколько должно быть изменено значение input'а, и тогда проверять у кнопок наличие классов будет не надо:

<button class="minus" data-change="-1">-</button>
<button class="plus" data-change="+1">+</button>

document.addEventListener('input', updateInput);
document.addEventListener('click', updateInput);

function updateInput({ target: t }) {
  const counter = t.closest('.counter');
  if (counter) {
    const input = counter.querySelector('input');
    const min = input.min || -Infinity;
    const max = input.max || Infinity;
    input.value = Math.min(max, Math.max(min, (input.value | 0) + (t.dataset.change | 0)));
  }
}

Наверное, надо не строку, а массив класть в coordinates. Попробуйте заменить

'['.$row['y_coordinates'].']'

на что-то вроде

explode(', ', $row['y_coordinates'])

А если нужно, чтобы элементы массива были числами:

array_map('floatval', explode(', ', $row['y_coordinates']))

Надо добавлять к желаемому значению scrollTop текущий scrollTop контейнера, т.е.,

position = anchor.position().top;

замените на

position = anchor.position().top + $('#container').scrollTop();

А чем у вас сейчас отфильтрованные изображения отличаются от прочих? Видимостью. Под это дело у jquery есть специальный селектор, :visible. Вот с его помощью и отбирайте следующее изображение, например так.

UPD. Сразу не заметил, у вас там отфильтрованным изображениям назначается специальный класс - конечно, вместо :visible лучше использовать его (в примере по ссылке выше можно просто заменить одно на другое).

const buttonSelector = 'button';
const getButtons = () => document.querySelectorAll(buttonSelector);

Можем делегировать обработку кликов по кнопкам:

document.addEventListener('click', e => {
  if (e.target.matches(buttonSelector)) {
    const buttons = getButtons();
    const texts = Array.from(buttons, n => n.textContent);
    for (const [ i, n ] of buttons.entries()) {
      n.textContent = texts[-~i % texts.length];
    }
  }
});

А можем назначить обработчик клика каждой кнопке индивидуально:

const buttons = getButtons();
const onClick = () =>
  buttons.forEach(function(n, i) {
    n.innerText = ++i === buttons.length ? this : buttons.item(i).innerText;
  }, buttons.item(0).innerText);

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

Оборачивайте текст в span'ы - тогда и проблем с удалением не будет.

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

const div = document.querySelector('.line');
div.removeChild(div.childNodes[2]);

// или

document.querySelector('.line input').nextSibling.remove();

// или

document.querySelector('.line').lastChild.remove();

Сделаем метод, получающий item и возвращающий его группу:

methods: {
  group(item) {
    return item && Object.entries(this.groups).find(([ k, v ]) => v.includes(item.group))[0];
  },

Сделаем вычисляемое свойство, представляющее выбранную группу:

computed: {
  selectedGroup() {
    return this.group([].concat(...this.data.map(n => n.items)).find(n => n.checked));
  },

Если выбранная группа есть и не совпадает с группой текущего item'а, блокируем чекбокс:

<ul v-for="{ items } in data">
  <li v-for="item in items">
    <label>
      <input
        type="checkbox"
        v-model="item.checked"
        :disabled="selectedGroup && selectedGroup !== group(item)"
      >
      {{ item.name }} ({{ group(item) }})
    </label>
  </li>
</ul>

https://jsfiddle.net/cqm1erza/