0xD34F

Где элементы находятся, какой id выступает в роли ограничителя:

const parent = document.querySelector('ul');
const id = 'item';

Получаем элементы:

const elems = Array.from(parent.children);
const index = elems.findIndex(n => n.id === id);
const result = index === -1 ? elems : elems.slice(0, index);

// или

const result = [...parent.querySelectorAll(`:not(#${id}, #${id} ~ *)`)];

// или

const result = [];
for (
  let el = parent.firstElementChild;
  el && el.id !== id;
  el = el.nextElementSibling
) {
  result.push(el);
}

Подключить роутер. Выделить под подробную информацию отдельный маршрут. Параметром маршрута сделать id. Включить проброс параметров в компонент маршрута. Компонент, используя полученный id, будет извлекать информацию из хранилища (оформить это дело как вычисляемое свойство). Вот так всё просто.

Так же, как и обычный список:

{items.map(n => <div className="item">...</div>)}

Увеличенную ширину задать через css:

.item:nth-child(6n + 3),
.item:nth-child(6n + 4) {
  ...
}

https://jsfiddle.net/exfk10Ls/1/

const makeCensored = (str, words, replacement = '***') =>
  str
    .split(' ')
    .map(n => words.includes(n) ? replacement : n)
    .join(' ');

function merge($idKey, $mergeKeys, ...$data) {
  $merged = [];

  foreach (array_merge(...$data) as $item) {
    $id = $item[$idKey];

    if (!array_key_exists($id, $merged)) {
      $merged[$id] = [
        'unique' => true,
        'item' => $item,
      ];
    } else {
      if ($merged[$id]['unique']) {
        $merged[$id]['unique'] = false;
        foreach ($mergeKeys as $k) {
          $merged[$id]['item'][$k] = [ $merged[$id]['item'][$k] ];
        }
      }

      foreach ($mergeKeys as $k) {
        $merged[$id]['item'][$k][] = $item[$k];
      }
    }
  }

  return array_column($merged, 'item');
}


$merged = merge('code', [ 'quantity', 'city' ], $arr1, $arr2);

Поскольку в документации к компоненту на этот счёт ничего не сказано, придётся использовать ymaps api напрямую. Чтобы получить к нему доступ, воспользуйтесь loadYmap. Чтобы получить доступ к карте, получите ссылку на экземпляр её компонента, карта будет доступна как свойство myMap. Ну а раздел документации карт, посвящённый созданию кнопок, вы уже видели - так что берёте и создаёте.

const obj = Object.fromEntries(await Promise.all(ids.map(async n => [ n, await loadPosts(n) ])));

preg_replace_callback('#\[~(.*?)~\]#', fn($m) => $arr['person'][$m[1]], $str)

убрать закрытие по клику на фоне

Опции не нашел такой

а я нашёл

Сделать вычисляемое свойство - объект, который будет содержать всё, что требуется отслеживать. Установить наблюдение за этим свойством.

Никак.

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

В будущем тщательнее выбирайте, кого хотите пригласить.

Пусть у каждого элемента массива tests будет собственное свойство show, а не одно на всех. Заменяете:

@click="show = !show" ---> @click="test.show = !test.show"

{{this.show === false ? 'Open' : 'Close'}} ---> {{ test.show ? 'Close' : 'Open' }}

<div v-if="show" > ---> <div v-if="test.show">

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

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

@click="show = !show" ---> @click="show = show === test ? null : test"

{{this.show === false ? 'Open' : 'Close'}} ---> {{ show === test ? 'Close' : 'Open' }}

<div v-if="show" > ---> <div v-if="show === test">

const group = (arr, idKey, valKey) =>
  Object.values(arr.reduce((acc, { [idKey]: id, [valKey]: val }) => (
    (acc[id] ??= { [idKey]: id, [valKey]: [] })[valKey].push(val),
    acc
  ), {}));


const result = group(data, 'id', 'color');

str.split(';').pop()
// или
str.replace(/.*;/, '')
// или
str.match(/;(.*)/)[1]
// или
/[^;]+$/.exec(str).shift()
// или
str.slice(str.lastIndexOf(';') + 1)
// или
[...str].reduce((acc, n) => n === ';' ? '' : acc + n)
// или
Array.from(str).filter((n, i, a) => !a.includes(';', i)).join('')

Собрать новый массив:

const newArr = arr.map(function(n) {
  return [ ...n, ...Array(this - n.length).fill('') ];
}, Math.max(...arr.map(n => n.length)));

Обновить существующий:

const max = arr.reduce((max, { length: n }) => max > n ? max : n, 0);
arr.forEach(n => n.push(...Array(max - n.length).fill('')));

Вместо логического значения пусть будет идентификатор окна, которое надо открыть:

<button onClick={() => setModal('раз окно')}>1</button>
<button onClick={() => setModal('два окно')}>2</button>
<button onClick={() => setModal('три окно')}>3</button>
...
<Modal display={modal === 'раз окно'}>...</Modal>
<Modal display={modal === 'два окно'}>...</Modal>
<Modal display={modal === 'три окно'}>...</Modal>

Понятно, что читать спецификацию (+, parseInt) вы вряд ли будете, раз не смогли отличия хотя бы погуглить, так что вот вам несколько примеров разницы, а дальше думайте сами, где что использовать:

parseInt('1!!!') // 1
+'1!!!' // NaN


parseInt('') // NaN
+'' // 0


parseInt('3.14159') // 3
+'3.14159' // 3.14159


parseInt('0b1000101') // 0
+'0b1000101' // 69


parseInt('0o273') // 0
+'0o273' // 187


parseInt({ valueOf: () => 666 }) // NaN
+({ valueOf: () => 666 }) // 666


parseInt('1000000000', 2) // 512
+'1000000000' // 1000000000


parseInt('99', 8) // NaN
+'99' // 99


parseInt('DEAD', 16) // 57005
+'DEAD' // NaN

function update(target, source, key, props) {
  source.forEach(function(n) {
    const item = this[n[key]];
    item && props.forEach(m => item[m] = n[m]);
  }, Object.fromEntries(target.map(n => [ n[key], n ])));
}


update(directions, [ { раз объект }, { два объект }, ... ], 'id', [ 'color' ]);

Обернуть tr, который должен присутствовать всегда и tr, который должен присутствовать в зависимости от условия в общий template:

<tbody>
  <template v-for="item in data">
    <tr>...</tr>
    <tr v-if="...">...</tr>
  </template>
</tbody>

re.sub(r'\{color.*?\}', '', text)