0xD34F

Потому что объявляемая вами переменная name - глобальная, применительно к клиентскому javascript'у это означает, что она окажется свойством объекта window, у которого свойство name уже есть, и, как нам тут подсказывают, его значения могут быть только строками:

window.name converts all stored values to their string representations using the toString method

Где я лапухнулся?

Там, где решили чтение документации подменить фантазированием. Верните SELECT обратно, а "непонятный результат" - это ресурс результата запроса, из него надо достать что там вам нужно, для этого есть всякие разные методы - pg_fetch_result, pg_fetch_row, pg_fetch_all, ... - выбирайте подходящий.

Можно ли использовать `dashboard` селектор в `dashboard.scss`.

Нельзя.

Читайте документацию, так всё сказано:

The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template. The host element is in a parent component's template.

Прежде всего мне непонятно зачем происходит сравнение с index.

Затем, что это сравнение для конкретного значения выдаст true ровно один раз - так как indexOf возвращает первый индекс, по которому можно найти элемент, равный указанному. То есть, если indexOf текущего элемента равен текущему индексу, значит элемент встречен впервые, и его надо оставить.

Как можно прикрутить это дело в vue, или как средствами vue подобное реализовать?

Варианты разные есть - вы бы рассказали, для чего вам такое надо.
Если совсем в лоб, то

methods: {
  onMouseOver(e) {
    if (e.buttons) {
      e.target.checked = !e.target.checked;
    }
  },
},

<input
  type="checkbox"
  v-for="i in 3000"
  @mouseover="onMouseOver"
>

для каждого генерировать модель мне кажется не вариант

Вполне себе вариант:

data: () => ({
  checkboxes: Array(3000).fill(false),
}),
methods: {
  onMouseOver(e, index) {
    if (e.buttons) {
      this.$set(this.checkboxes, index, !this.checkboxes[index]);
    }
  },
},

<input
  type="checkbox"
  v-for="(n, i) in checkboxes"
  v-model="checkboxes[i]"
  @mouseover="onMouseOver($event, i)"
>

Работать, правда, будет заметно медленнее, чем без v-model (если чекбоксов много).

$('.result').filter((i, { dataset: d }) => d.from <= id && id <= d.to)

Замените в beforeDialog (это в /app/dialogs/dialogs.service.ts)

return dialogRef.beforeClose();

на

return dialogRef.afterClosed();

А то у вас сейчас следующий диалог открывается до того, как будет закрыт предыдущий, соответственно (как это мне видится, оговорюсь - с angular material не знаком), сначала новый диалог при открытии блокирует и так уже заблокированный скролл, затем старый диалог при закрытии скролл разблокирует.

А в чём проблема-то? Заводите переменную, которая отвечает за количества колонок, привязываете её к вашему mat-grid-list в качестве значения параметра cols, и меняете как вам там нужно. Примерно так.

Заходите в Preferences -> Settings - Distraction Free, вписываете

{
	"wrap_width": 0,
	"draw_centered": false
}

возможно ли нарисовать самого pacman-a только средствами CSS?

погуглил за вас

Проблема в том, что если элемент пометить #name и после этого пытаться в родительском элементе получать его через @ViewChild, то элемент не находится потому что, как я выше говорил, элементы появляются и пропадают динамически

Можно поступить следующим образом: через ViewChild получайте элемент в дочернем компоненте, а в родительском - экземпляры дочерних компонентов через ViewChildren, из которых и доставайте, что вам надо. Выглядеть это может так.

держите

'user.name'.split('.').reduce((obj, key) => obj[key], filter_params)

Можно применить рекурсию:

const combinations = (
  str,
  {
    charset = 'abcdefghijklmnopqrstuvwxyz',
    placeholder = '&',
  } = {}
) =>
  str.includes(placeholder)
    ? [].concat(...Array.from(
        charset,
        n => combinations(str.replace(placeholder, n), { charset, placeholder })
      ))
    : [ str ];


console.log(combinations('ih&v&'));

А можно не применять:

function combinations(
  [...str],
  {
    charset = Array.from({ length: 26 }, (_, i) => String.fromCharCode(i + 97)),
    placeholder = '&',
  } = {}
) {
  const numReplacements = str.filter(n => n === placeholder).length;
  return Array.from(
    { length: charset.length ** numReplacements },
    (_, i) => {
      let j = numReplacements;
      return str
        .map(n => n === placeholder
          ? charset[(i / (charset.length ** --j) | 0) % charset.length]
          : n)
        .join('');
    }
  );
}


console.log(combinations('#**', { charset: '0123456789ABCDEF', placeholder: '*' }));

Вместо индекса - ссылка на выбранный объект:

data: () => ({
  activeProject: null,
  ...
}),

Вместо того, чтобы вручную прописывать разметку кнопок - v-for по массиву group:

<button
  v-for="project in group"
  v-text="project.name"
  @click="activeProject = project"
></button>

Вместо обработки события change - v-model:

<input type="checkbox" v-model="task.done">

https://jsfiddle.net/arLfczjv/

Проблема в том, что после первого тыка не хочет рендерится новый лог, он вроде как подгружается, но страница рендерит "первака".

При каждом вызове ItemBlockClick вы создаёте всё новые и новые экземпляры Vue с использованием одного и того же элемента. Новый экземпляр в качестве шаблона использует результат рендеринга предыдущего - это голый html, там уже нет никаких директив vue. Так что имеющееся содержимое корневого элемента просто создаётся заново, один к одному.

Делайте так: второй экземпляр Vue пусть будет создан изначально, а в ItemBlockClick передавайте ему новые данные. Ну или (что было бы более желательно) попробуйте переписать свой код так, чтобы отображением обоих секций управлял один экземпляр vue.

Как минимум, косяк в том, что корневой элемент должен быть один, а у вас их два. Это я про шаблон #analyzes-template - добавьте существующим элементам общий родительский:

<template id="analyzes-template">
  <div>
    <div v-show="active_analyzes_template">
        Анализы
    </div>
    <a class="btn btn-sm btn-outline-success" @click="openTemplate()">НАЗНАЧИТЬ АНАЛИЗЫ</a>
  </div>
</template>

Проверяйте, где был клик:

$('body').on('click', '.myclass', function(e) {
  if (!$(e.target).hasClass('button')) {
    document.location.href = 'index.html';
  }
});

Или останавливайте всплытие событий при клике на кнопку:

$('.button').on('click', e => e.stopPropagation());

this.state = {loadworksheep: false};

this.setState({loadWorksheep: true});

Так как правильно - w должна быть большой или маленькой? Вы бы определились.

const worksheetLoaderPage = (
    WorksheetSelector
);

WorksheetSelector ---> <WorksheetSelector />

Если есть другой способ по нажатию кнопки рендерить другую страницу, то буду крайне рад услышать.

react router