0xD34F

возможно ли нарисовать самого 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

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

Замените

var aNum = $('.answers .answer').length;

на

var aNum = $(this).closest('.answers').find('.answer').length;

Попробуйте отслеживать изменения user, т.е.:

export default {
  name: 'CustomButton',
  data: () => ({
    input_value: '',
  }),
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  watch: {
    user(val) {
      this.input_value = val.custombutton;
    },
  },
};

array_intersect(...$arrays)

preg_split('/[^\d]+/', $str)

Заменить:

- change_element.attr('data-animation-in', $(this).val())
+ change_element.data('animation-in', $(this).val())

Ну или наоборот:

- dropdown_container.data('animation-in')
+ dropdown_container.attr('data-animation-in')

Дело в том, что данные, которые привязываются к элементу с помощью метода data, они не в атрибутах хранятся, обращение к атрибутам выполняется только один раз:

data-* attributes are used to initialize jQuery data. An element's data-* attributes are retrieved the first time the data() method is invoked upon it, and then are no longer accessed or mutated (all values are stored internally by jQuery)

Так что или всегда работайте через data, или всегда через attr.

Все слишком громоздко, ступор.

А знаете почему? Причина номер раз - козлиные имена переменных, свойств объектов и т.д. Например, если у вас в группах содержатся проекты, то и назвали бы соответствующее свойство projects, а не arr. В проектах содержатся задачи - ну так пусть их список называется tasks, а не arr. А так у вас два разных arr - и ни про один сходу не скажешь, что это такое. Уже достаточно, чтобы запутаться.

Выбранные группа/проект - вместо индексов лучше хранить ссылку на сам объект, в случае проекта его же и передавать в компонент - так будет доступен список уже существующих задач и ваша проблема с их выводом решится сама собой.

При добавлении новых задач перетираете их список - зачем?

Немного подправил ваш код, типа вот. Похоже на то, к чему вы стремились?

.replace('/\s\s+/g', ' ')

Неправильно определяете регулярное выражение - кавычки не нужны.
Нет необходимости дублировать \s.
Есть иные способы помимо replace избавиться от повторяющихся пробелов.

document.querySelector('#text').addEventListener('input', e => {
  const value = e.target.value.trim();
  const output = document.querySelector('#output');

  output.textContent = value.replace(/\s+/g, ' ').length;
  // или
  output.innerText = value.split(/\s+/).join(' ').length;
  // или
  output.innerHTML = ''.concat(...(value.match(/\S+\s?/g) || [])).length;
});

Замените

$('.test').append('NEW BLOCK!');

на

$(this).closest('.test').append('NEW BLOCK!');