0xD34F

'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 - и ни про один сходу не скажешь, что это такое. Уже достаточно, чтобы запутаться.

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

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

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

Неправильно регулярное выражение определяете - кавычки не нужны. Да и попроще его можно сделать:

$('#text').on('input', function() {
  $('#output').text(this.value.trim().replace(/\s+/g, ' ').length);
});

Замените

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

на

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

Вы берёте значение deleted из элементов массива productsList - естественно, одновременно разных значений быть не может. Надо, чтобы у каждого элемента history был свой deleted:

toggleRow(index) {
  this.setState(({ productsList, history }) => ({
    productsList: productsList.map((n, i) => i === index
      ? { ...n, deleted: !n.deleted }
      : n
    ),
    history: [
      ...history,
      {
        currentDateInfo: new Date().toLocaleDateString(),
        deleted: !productsList[index].deleted,
        index,
      },
    ],
  }));
}

<ul className="list-group">
  {this.state.history.map(n =>
    <li className="list-group-item">
      Row {n.index} {n.deleted ? 'deleted' : 'restored'} at {n.currentDateInfo}
    </li>
  )}
</ul>

document.querySelectorAll('tbody > tr').forEach(n => n.parentNode.prepend(n));

// или

const tbody = document.querySelector('tbody');
tbody.append(...Array.from(tbody.children).reverse());

// или

for (const n of [...document.querySelector('tbody').rows].reverse()) {
  n.parentNode.appendChild(n);
}

// или

const tbody = document.querySelector('tbody');
for (let i = tbody.rows.length; i--;) {
  tbody.insertAdjacentElement('beforeend', tbody.rows[i]);
}

Как я думал сделать:
По клику на deleteделать поля Name и Id visibility: none и в стейте сделать переменную isDeleted: true, если true то рендерить кнопку Restor'а, по клику на нее полям возвращать visibility.

Окей, делаем:

const ProductItem = ({ product, toggleRow }) => {
  return (
    <tr>
      <th>{product.deleted || product.id}</th>
      <td>{product.deleted || product.name}</td>
      <td>
        <button onClick={toggleRow}>
          {product.deleted ? 'Restore' : 'Delete'}
        </button>
      </td>
    </tr>
  );
};

class Products extends React.Component {
  state = {
    products: [ 'Apple', 'Peanut', 'Tomato', 'Cucumber', 'Banana', 'Lemon' ].map((n, i) => ({
      id: i + 1,
      name: n,
      deleted: false,
    })),
  }

  toggleRow(index) {
    this.setState(({ products }) => ({
      products: products.map((n, i) => i === index
        ? { ...n, deleted: !n.deleted }
        : n
      ),
    }));
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Product Name</th>
            <th>Delete / Restore</th>
          </tr>
        </thead>
        <tbody>
          {this.state.products.map((n, i) => (
            <ProductItem
              key={n.id}
              product={n}
              toggleRow={() => this.toggleRow(i)}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

Правда непонятно, при чём тут удаление? - данные-то на месте остаются, просто не отображаются.