0xD34F

web worker

$withoutZero = array_filter($X, function($n) {
  return strpos($n, '0') === false;
});

Array.prototype.reduce.call(
  document.querySelector('table').rows,
  (acc, n) => {
    if (!n.classList.contains('no')) {
      acc[acc.length - 1].info.push({
        subtitle: n.querySelector('th').textContent,
        cell: n.querySelector('td').textContent,
      });
    } else if (!n.querySelector('.no2')) {
      acc.push({
        title: n.querySelector('.car').textContent,
        info: [],
      });
    }

    return acc;
  },
  []
)

Нужны отдельные компоненты для страны, региона и города - компонент страны выводит список своих регионов, компонент региона список городов. Например. Или, можно делать компоненты не под отдельные элементы, а под списки - список стран, список регионов, список городов - будет примерно то же самое.

<div ref="map">

mounted() {
  this.map = L.map(this.$refs.map).setView([ 55.75222, 37.61556 ], 13);
  ...

Всё выводится правильно. То, что отметка 2015 отсутствует - ну так ваши данные начинаются после начала этого года. Хотите её увидеть - можно в качестве начала интервала брать дату из конца предыдущего года, например:

x.domain([
  d3.min(data, d => new Date(d.date)).setMonth(-1),
  d3.max(data, d => new Date(d.date)),
]);

<v-data-table @click:row="onClickRow">

methods: {
  onClickRow(item) {
    console.log(item);
  },
  ...

youmightnotneedjquery.com

UPD.

$(this).parents('.portfolio')

function parents(el, selector) {
  const p = [];
  while ((el = el.parentNode) !== document && el) {
    (!selector || el.matches(selector)) && p.push(el);
  }
  return p;
}

parents(this, '.portfolio')

$(this).parent('.portfolio')

this.parentNode.classList.contains('portfolio') ? this.parentNode : null

$(this).children('.portfolio')

[...this.children].filter(n => n.classList.contains('portfolio'))

// или

Array.prototype.filter.call(this.children, n => n.matches('.portfolio'))

// или

this.querySelectorAll(':scope > .portfolio')

$(this).find('.portfolio')

this.querySelectorAll('.portfolio')

$(this).next('.portfolio')

(el => el && el.matches('.portfolio') ? el : null)(this.nextElementSibling)

Есть такая штука - массив называется. Попробуйте как-нибудь.

const dropzone = event.currentTarget;
dropzone.insertBefore(draggableElement, event.target.closest('tr').nextElementSibling);

или

event.target.closest('tr').after(draggableElement);

Если воспользуетесь конструктором Vuex.Store более одного раза, вас за это в тюрьму не посадят. Так что вам ничего не мешает создать несколько разных сторов, свой для каждого экземпляра Vue.

А если их структура должна быть идентична - сделайте функцию, которая будет создавать стор и вместо

new Vue({
  store: store,
  ...

будет

new Vue({
  store: createStore(),
  ...

https://jsfiddle.net/25L08xj1/

https://jsfiddle.net/ca2t9vzg/

Сделайте отдельный компонент для этих секций, со свойством isActive - у каждого экземпляра оно будет собственное. Или этих isActive'ов у вас должен быть массив, длина которого равна количеству секций. Или добавьте свойство isActive элементам sections - каждому.

попытался решить все через рекурсию

Рекурсией конечно можно:

const createTree = (data, idKey, parentKey, parentId) =>
  data.reduce((acc, n) => (parentId === n[parentKey] && acc.push({
    ...n,
    children: createTree(data, idKey, parentKey, n[idKey]),
  }), acc), []);


const tree = createTree(data, 'id', 'parentId', null);

Но вовсе не обязательно:

function createTree(data, idKey, parentKey) {
  const tree = Object.fromEntries(data.map(n => [ n[idKey], { ...n, children: [] } ]));

  return Object
    .values(tree)
    .filter(n => !(tree[n[parentKey]] && tree[n[parentKey]].children.push(n)));
}


const tree = createTree(data, 'id', 'parentId');

передавать параметры <...> оставив в computed

А смысл? Будет computed свойство, значение которого является функцией. Никакого кеширования, только усложнение кода. Делайте обычный метод:

methods: {
  filterHeroes(attr) {
    const s = this.searchHeroesString.toLowerCase();
    return this.heroes.filter(n => n.hero_attribute === attr && n.name.toLowerCase().includes(s));
  },

data: () => ({
  active: false,
}),
created() {
  const onClick = e => this.active = this.$refs.block.contains(e.target) && this.active;
  document.addEventListener('click', onClick);
  this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClick));
},

<button @click.stop="active = !active">click me</button>
<div :class="{ active }" ref="block">hello, world!!</div>

Экранируйте скобку: text = '\\('.

закрывающий тэг - на самом деле не закрывающий

Intersection Observer

например

Добавляете в стейт свойство, которое будет представлять выбранный блок:

state: {
  opened: null,
  ...

В экземпляры компонента Trigger передавайте соответствующие им блоки:

<Trigger :block="block">

props: [ 'block' ],

Также, Trigger должен знать, какой блок открыт:

computed: mapState([ 'opened' ]),

Чтобы можно было назначить класс кнопке:

:class="{ 'active' : block === opened }"

При клике на которую следует передавать блок в мутацию:

@click="toggleNav(block)"

Мутация же будет устанавливать значение выбранного блока:

toggleNav(state, block) {
  state.opened = state.opened === block ? null : block;
},

Это если оно действительно toggle. Если просто открытие - тогда достаточно state.opened = block (название мутации в этом случае конечно следует поменять).

Мутация, отвечающая за закрытие, будет выглядеть так:

closeSidebarPanel(state) {
  state.opened = null;
},

Геттер isNavOpen тоже изменится:

isPanelOpen(state) {
  return !!state.opened;
},

Ну и наконец, можно что-нибудь вывести в Sidebar, например:

<span v-if="isPanelOpen">{{ $store.state.opened.bName }}</span>

Но если Sidebar предназначен конкретно для этих блоков, наверное, разумнее будет, чтобы он сам знал, кто сейчас открыт. В Sidebar'е цепляете opened к слоту:

<slot :block="$store.state.opened"></slot>

Соответственно, в родительском компоненте:

<template #default="{ block }">
  <div class="sidebar-panel-settings">
    <div class="setting-block">
      {{ block.bName }}
    </div>
  </div>
</template>