0xD34F

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

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

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

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

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

Выдёргиваем из объектов значения, сортируем, берём сколько надо крайних, собираем строку:

const result = arr
  .map(Object.values)
  .sort((a, b) => b - a)
  .slice(0, 3)
  .join(', ');

Конечно, по-хорошему, вместо map следовало бы использовать flatMap, но пока в элементах массива содержится по одному свойству - и так сойдёт.

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 result = Object.values(data.reduce((acc, { id, color }) => (
  (acc[id] ??= { id, colors: [] }).colors.push(color),
  acc
), {}));

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

function group(data, key, val = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const getVal = val instanceof Function ? val : n => n[val];
  const result = new Map;

  for (const n of data) {
    const k = getKey(n);
    result.set(k, result.get(k) ?? []).get(k).push(getVal(n));
  }

  return result;
}

const result = Array.from(
  group(data, 'id', 'color'),
  ([ id, colors ]) => ({ id, colors })
);

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


parseInt(5067n) // 5067
+5067n // никакого числа тут не будет, получите TypeError

Куда надо записывать новый текст, откуда этот текст брать и как его там найти:

const target = document.querySelector('.color__des-item');
const container = document.querySelector('.color__list');
const key = 'name';
const attr = `data-${key}`;
const buttonSelector = `[${attr}]`;

Как достать из элемента значение data-атрибута:

const getAttr = el => el.dataset[key];
// или
const getAttr = el => el.getAttribute(attr);
// или
const getAttr = el => el.attributes[attr].value;

Обработчик клика можно назначить каждому элементу с data-атрибутом индивидуально:

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => target.textContent = getAttr(e.currentTarget));

Или, один раз - их общему предку:

container.addEventListener('click', ({ target: t }) =>
  (t = t.closest(buttonSelector)) &&
  (target.innerText = getAttr(t))
);

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)

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

function merge(key, ...arrs) {
  const getKey = key instanceof Function ? key : n => n[key];
  const result = new Map;

  arrs.forEach(arr => arr.forEach(n => {
    const k = getKey(n);
    result.set(k, Object.assign(result.get(k) ?? {}, n));
  }));

  return [...result.values()];
}

const result = merge('id', testResult, test);

Обновляем существующий:

function merge(key, target, ...arrs) {
  const getKey = key instanceof Function ? key : n => n[key];
  const targetMap = new Map(target.map(n => [ getKey(n), n ]));

  arrs.forEach(arr => arr.forEach(n => {
    const k = getKey(n);
    targetMap.has(k) && Object.assign(targetMap.get(k), n);
  }));

  return target;
}

merge(n => n.id, testResult, test);