0xD34F

Компонент Item, обработчик onImportantClick - надо останавливать всплытие события, чтобы оно не обрабатывалась ещё и в onItemClick, т.е.:

onImportantClick = (e) => {
  e.stopPropagation();
  this.setState(({ important }) => ({
    important: !important
  }));
};

const containerSelector = '#menu_left';
const itemSelector = `${containerSelector} li`;
const className = 'active';

Останавливайте всплытие событий:

$(itemSelector).click(function(e) {
  e.stopPropagation();
  $(this).addClass(className);
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => {
  e.stopPropagation();
  e.currentTarget.classList.add(className);
});

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

$(containerSelector).click(e => {
  $(e.target).closest(itemSelector).addClass(className);
});

// или

document.querySelector(containerSelector).addEventListener('click', e => {
  const li = e.target.closest(itemSelector);
  if (li) {
    li.classList.add(className);
  }
});

Где элементы находятся (родительский элемент), кого из них (минимальный и максимальный индексы в коллекции вложенных элементов родителя) и куда надо переместить:

const parent = document.querySelector('.box').parentNode;

const iMin = 2;
const iMax = 5;

const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');

Получаем элементы, перемещаем:

if (parent.children[iMin]) {
  const elems = Array.prototype.slice.call(parent.children, iMin, iMax);
  elems[0].before(wrapper);
  wrapper.append(...elems);
}

// или

const elems = parent.querySelectorAll(`:nth-child(n + ${-~iMin}):not(:nth-child(n + ${-~iMax}))`);
if (elems.length) {
  parent.insertBefore(wrapper, elems[0]);
  elems.forEach(n => wrapper.appendChild(n));
}

// или

if (parent.children.length > iMin) {
  parent.children[iMin].insertAdjacentElement('beforebegin', wrapper);
  for (let i = iMax - iMin, n = null; i-- && (n = wrapper.nextElementSibling);) {
    wrapper.insertAdjacentElement('beforeend', n);
  }
}

Что значит "не промисы, а async/await"? - async/await это тоже промисы.

Используйте await Promise.all, например:

const result = await Promise.all([ 1, 2, 3 ].map((n, i) => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`timeout #${i}`);
      resolve(n * 10);
    }, Math.random() * 3000 | 0);
  });
}));

console.log('result:', result);

Замените

{{bDay | date: format}}

на

{{ date | date : toggDate[pic.id] ? 'fullDate' : 'shortDate' }}

А свойство format можно удалить.

кнопки и слайды где то вообще не понятно где

css подключить забыли

const jsx = э-э-э, чё, это у вас тут фигурная скобка?

ошибка появилась из ниоткуда

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

Непонятно, чем мотивировано неиспользование v-for. Если использовать, будет гораздо проще добиться того, что вы хотите, например:

.hidden {
  opacity: 0;
}

data: () => ({
  items: [
    { text: '...', hidden: true },
    { text: '...', hidden: true },
    ...
  ],
}),
mounted() {
  this.items.forEach((n, i) => {
    setTimeout(() => n.hidden = false, 300 * (i + 1));
  });
},

<li v-for="{ text, hidden } in items" :class="{ hidden }">
  <a href="">{{ text }}</a>
</li>

Какого размера нужен массив и как создавать его элементы:

const length = 25;
const createItem = i => ({
  url: `photos/${i}.jpg`,
  // ещё какие-то свойства
});

Создаём:

const items = Array.from({ length }, (_, i) => createItem(i + 1));

// или

const items = [];
for (let i = 1; i <= length; i++) {
  items.push(createItem(i));
}

// или

const items = [];
while (items.length < length) {
  items[items.length] = createItem(-~items.length);
}

// или

const items = (function createItems(i) {
  return i > 0 ? [ ...createItems(i - 1), createItem(i) ] : [];
})(length);

И самое главное, мне нужно потом взять значение этих массивов.
descriptionImage.url - Как-то так

Не так.

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

Во-вторых - пропущено обращение к элементу массива: descriptionImage[индекс элемента].url.

не оборачиваются

Вообще-то, оборачиваются. Только после вы ничего с этими элементами не делаете. Ну и вместо wrap следует использовать wrapAll, чтобы у элементов оказался общий родитель, а не отдельный для каждого.

А как должно быть корректно? Просто забыли об этом рассказать, или решили что отвечающим догадаться труда не составит? Предположу, что вы стремились к чему-то вроде этого.

$('.list').find('li:gt(2)').hide();
// или
$('li:gt(2)', '.list').hide();
// или
$('.list li:nth-child(3)').nextAll().hide();
// или
$('.list li:nth-child(n + 4)').hide();
// или
$('.list li').next().next().next().hide();
// или
$('.list > + + +').hide();

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

Array
  .from(document.querySelectorAll('.list'))
  .flatMap(n => [...n.children].slice(3))
  .forEach(n => n.hidden = true);

// или (тут надо будет стиль добавить: .hidden { display: none; })

[].forEach.call(document.getElementsByClassName('list'), n => {
  [].forEach.call(n.getElementsByTagName('li'), (m, i) => {
    m.classList.toggle('hidden', i > 2);
  });
});

Если подобное надо выполнять неоднократно, а селекторы и количество элементов, оставляемых видимыми, разнятся, то можно и функцию сообразить (чтобы можно было делать так, например: hide('.list', 'li', 3);):

function hide(containerSelector, elementSelector, hideFrom) {
  $(containerSelector).each((i, n) => {
    $(elementSelector, n).slice(hideFrom).hide();
  });
}

// или

function hide(containerSelector, elementSelector, hideFrom) {
  for (const n of document.querySelectorAll(containerSelector)) {
    const elements = n.querySelectorAll(elementSelector);
    for (let i = hideFrom; i < elements.length; i++) {
      elements[i].style.display = 'none';
    }
  }
}

Так, что ли:

const marker = new ymaps.Placemark([ latitude, longitude ], {}, {
  preset: 'islands#redHomeIcon',
});

map.geoObjects.add(marker);

??

Режете массив на куски - будет массив массивов. И обходите его, внешний цикл создаёт элементы .section, внутренний - .section__item:

class App extends React.Component {
  state = {
    cards: Array.from({ length: 7 }, (_, i) => ({
      id: i + 1,
      content: Math.pow(i, 3),
    })),
  }

  addElem = () => {
    this.setState(({ cards }) => ({
      cards: [ ...cards, {
        id: cards.length + 1,
        content: Math.random().toString(16).slice(2),
      } ],
    }));
  }

  render() {
    const { cards } = this.state;
    const chunkLen = 3;
    const chunks = Array.from(
      { length: Math.ceil(cards.length / chunkLen) },
      (_, i) => cards.slice(i * chunkLen, (i + 1) * chunkLen)
    );

    return (
      <div>
        <button onClick={this.addElem}>add new element</button>
        {chunks.map(n => (
          <div className="section">
            {n.map(m => (
              <div className="section__item">
                <a>#{m.id} {m.content}</a>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

modal.trigger('to.owl.carousel', [ indexThumb, 100, true ])

В колонках где tbody я смог реализовать

Не до конца - у вас нет связи между чекбоксом и значением соответствующего свойства. Надо сделать:

<template slot="isActive" slot-scope="{ item }">
  <b-form-checkbox v-model="item.isActive"></b-form-checkbox>
</template>

но вот в thead не получается

Делаете вычисляемое свойство, которое будет представлять общее состояние всех чекбоксов в столбце. Геттер возвращает true, если все чекбоксы true; сеттер - назначаете всем чекбоксам переданное значение:

checkedAll: {
  get() {
    return this.items.every(n => n.isActive);
  },
  set(val) {
    this.items.forEach(n => n.isActive = val);
  },
},

И используете это свойство в хедере:

<template slot="HEAD_isActive" slot-scope="data">
  <b-form-checkbox
    @click.native.stop
    :checked="checkedAll"
    @change="checkedAll = $event"
  ></b-form-checkbox>
</template>

https://jsfiddle.net/k1cbz7nu/

add() {
  const clone = this.clone.cloneNode(true);
  clone.dataset.index = this.index++;
  this.beforeInsert.before(clone);
}

Вместо .filter-values класс лучше переключать у их самых дальних не общих предков, т.е., у .material-block. В этом случае не надо искать внутри контейнера элемент, у которого должен быть переключен класс, а если в будущем захотите внутри открытого .material-block стилизовать ещё какой-то элемент, то не придётся переписывать js-код.

Так что стили немного поправим:

- .material-block .filter-values.open {
+ .material-block.open .filter-values {

У кого надо переключать класс, по клику на какой элемент внутри надо переключать класс, что за класс:

const containerSelector = '.material-block';
const buttonSelector = `${containerSelector} .catalog-filter-block-title`;
const activeClass = 'open';

Вот jquery, как вы и хотели:

$(document).on('click', ({ target: t }) => {
  const $container = $(t).closest(containerSelector);
  const $button = $(t).closest(buttonSelector);

  if ($button.length) {
    $container.toggleClass(activeClass);
  }

  $(containerSelector).not($container).removeClass(activeClass);
});

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

document.addEventListener('click', ({ target: t }) => {
  const container = t.closest(containerSelector);
  const button = t.closest(buttonSelector);

  if (button) {
    container.classList.toggle(activeClass);
  }

  document.querySelectorAll(containerSelector).forEach(n => {
    if (n !== container) {
      n.classList.remove(activeClass);
    }
  });
});

Во-первых - вы пытаетесь работать с элементами, которых нет (это я про .expanded). Гуглите "делегирование".

Во-вторых - поскольку в разные моменты времени поведение должно быть разным, click(false) не годится в качестве отмены действия по умолчанию - надо сделать нормальный обработчик, в котором выполнять preventDefault. Типа так (ну или тоже через делегирование, но это как-то глупо будет выглядеть - два обработчика одного события, хотя мог бы быть и один).