0xD34F

class App extends React.Component {
  state = {
    items: [...Array(20).keys()],
    chunkLen: 3,
  }

  onClick = ({ target: { dataset: { change } } }) => {
    this.setState(({ chunkLen }) => ({
      chunkLen: Math.max(2, Math.min(9, chunkLen + +change)),
    }));
  }

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

    return (
      <div>
        <button data-change="-1" onClick={this.onClick}>-</button>
        {chunkLen}
        <button data-change="+1" onClick={this.onClick}>+</button>
        <div>
          {chunks.map(chunk => (
            <div className="group">
              {chunk.map(n => <div className="group-item">{n}</div>)}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

:data="chartData"

computed: {
  chartData() {
    return this.$store.getters.filterManagersChart.map(n => ({
      name: n,
      data: 53,
    }));
  },
},

class App extends React.Component {
  state = {
    items: Array.from({ length: 10 }, (n, i) => ({
      id: i + 1,
      value: String.fromCharCode(97 + i).repeat(5),
    })),
    active: [],
  }

  toggleActive = e => {
    const id = +e.target.dataset.id;

    this.setState(({ active }) => ({
      active: active.includes(id)
        ? active.filter(n => n !== id)
        : [ ...active, id ],
    }));
  }

  render() {
    const { items, active } = this.state;

    return (
      <ul>
        {items.map(n => (
          <li
            key={n.id}
            data-id={n.id}
            onClick={this.toggleActive}
            className={active.includes(n.id) ? 'active' : ''}
          >
            {n.value}
          </li>
        ))}
      </ul>
    );
  }
}

li a {
  display: flex;
  align-items: center;
}

Ничего проверять не надо, undefined относится к falsy значениям, так что с помощью оператора || подставляйте пустой объект (или какое-нибудь другое значение - смотрите сами, как вам удобнее) там, где нужное значение может отсутствовать, например:

(((lead._embedded.items[0].custom_fields.find(cf => cf.id == PRODUCT_FIELD_ID) || {}).values || {})[0] || {}).value || null

UPD. Наконец-то дождались:

lead._embedded.items[0].custom_fields.find(cf => cf.id == PRODUCT_FIELD_ID)?.values[0].value ?? null

class TestClass {
  constructor() {
    const self = el => self.data.push(el);
    Object.setPrototypeOf(self, TestClass.prototype);

    self.data = [];

    return self;
  }

  toString() {
    return this.data.join('');
  }
}

Куда надо разложить значения элементов массива:

const elems = document.querySelectorAll('.fruits');

Раскладываем:

elems.forEach((n, i) => n.append(arr[i]));

// или

for (const [ i, n ] of elems.entries()) {
  n.innerText = arr[i];
}

// или

for (let i = 0; i < elems.length; i++) {
  elems[i].textContent = arr[i];
}

// или

(function next(i, n = elems.item(i)) {
  if (n) {
    n.appendChild(document.createTextNode(arr[i]));
    next(i + 1);
  }
})(0);

print(list(filter(lambda n: n % 10 in (2, 3, 4, 5), range(100))))

или

print([n for n in range(100) if n % 10 in (2, 3, 4, 5)])

или

print([m + n * 10 for n in range(10) for m in range(2, 6)])

Никакие хуки тут не нужны. Настройте слежение за свойством:

watch: {
  measureSystem: {
    immediate: true,
    handler() {
      // сюда переносите код из mounted - axios.get(...)
    },
  },
},

Заниматься установкой значений в computed не надо, сделайте measureSystem из обычного свойства вычисляемым (если, конечно, оно используется где-то ещё, помимо показанного запроса; в противном случае можно следить за toggle и вычислять значение параметра units непосредственно перед самим запросом):

computed: {
  measureSystem() {
    return this.toggle === 1 ? 'metric' : 'Imperial';
  },
},

$grouped = array_values(array_reduce($data, function($acc, $n) {
  $id = $n['store_id'];
  if (!isset($acc[$id])) {
    $acc[$id] = [ 'store_id' => $id, 'product_id' => [] ];
  }
  $acc[$id]['product_id'][] = $n['product_id'];
  return $acc;
}, []));

Снимайте обработчик события после того, как нужное действие будет выполнено:

$(window).scroll(function onScroll() {
  if ($(this).scrollTop() > 777) {
    $('.div_clone').clone().appendTo('.container2');
    $(this).off('scroll', onScroll);
  }
});

например

UPD. Используем элемент path, есть внешний контур, покрывающий весь svg, и множество внутренних - для вырезания дырок. Чтобы дырки вырезались, их надо рисовать в направлении, обратном тому, в котором рисовалась основная фигура. То есть, контур рисуется против часовой стрелки:

rectPath = `M0 0 v${vert} h${horz} v${-vert} h${-horz}`

От (0, 0) сначала движемся вниз (v - вертикальное смещение), затем вправо (h - горизонтальное), далее вверх, и наконец обратно горизонтально (вернулись в (0, 0)).

А дырки по часовой стрелке:

cellPath = ([ x, y ]) => `M${offset(x)} ${offset(y)} h${side} v${side} h${-side} v${-side}`

Сначала смещаемся в горизонтальном направлении вправо, затем вниз, потом обратно влево, и обратно вверх.

const isAllUnique = (...args) => new Set(args).size === args.length;

console.log(isAllUnique(69, 187, 666)); // true
console.log(isAllUnique(2, 2, 3, 4)); // false
console.log(isAllUnique(...'ABCDA')) // false

Допустимо ли использовать defs внутри symbol в SVG-элементе?

Да.

А тег style?

Да.

Где можно почитать о таких нюансах?

https://www.w3.org/TR/SVG11/struct.html#SymbolElement

<input @change="doSomethingWithValue" />

methods: {
  doSomethingWithValue(e) {
    const value = e.target.value;
    ...

Если надо в метод передавать дополнительно какие-то параметры, то объект события доступен в шаблоне как $event:

<input @change="doSomethingWithValue($event, 'hello, world!!')" />

$newData = array_map(function($item) {
  return array_map(function($val) {
    return [ 'text' => $val ];
  }, array_values($item));
}, $data);

например

Проблема в том, что рисуется только последний график. Почему?

Потому что

main.innerHTML += str;

После каждого += дочерние элементы main создаются заново. Соответственно, уже созданные графики удаляются.

Создавайте сразу всю разметку.

Или

main.insertAdjacentHTML('beforeend', str);

Или

const canvas = document.createElement('canvas');
main.appendChild(canvas);

$('.nav').on('click', '[href="#id-3"]', function() {
  $('.slick').slick('slickGoTo', 3);
});