0xD34F

[ f'{arr[i]} : {arr[i + 1]}' for i in range(0, len(arr), 2) ]

mounted() {
  console.log(this.props)

Оно называется немного иначе.

onClick : () => {
    console.log(this.props);

Ну что тут сказать... Забудьте про vue, просто забудьте. И начинайте осваивать js, вы его не знаете.

if(num=>5&&num<=10){

=> - никакой это не оператор сравнения.

Вы тут функцию создаёте, а булевым эквивалентом функции (как и почти всего вообще - исключения можно пересчитать по пальцам) является true.

используйте transition-group:

<transition-group name="slide" tag="div" class="table-body">
  <div class="table-tr" v-for="item in items" :key="item.id">
    <div class="table-td">{{ item.id }}</div>
    <div class="table-td">{{ item.user }}</div>
  </div>
</transition-group>

.table-tr {
  transition: 0.5s;
}

.table-body {
  overflow: hidden;
}

.slide-enter-from {
  transform: translateY(-100%);
}
.slide-enter-to {
  transform: translateY(0);
}

https://jsfiddle.net/Lr5qnwtv/1/

директиву сделайте, которая будет подправлять количество символов:

const handlers = new Map();

function updateHandler(el, binding) {
  el.removeEventListener('input', handlers.get(el));

  const handler = () => {
    const value = el.value.replace(/\D/g, '').slice(0, binding.value);
    if (value !== el.value) {
      el.value = value;
      el.dispatchEvent(new Event('input'));
    }
  };
  handler();
  handlers.set(el, handler);

  el.addEventListener('input', handler);
}

Vue.directive('maxlen', {
  bind: updateHandler,
  update: updateHandler,
  unbind(el) {
    el.removeEventListener('input', handlers.get(el));
    handlers.delete(el);
  },
});

<input type="number" v-maxlen="2">

И в чём проблема? Компонент пагинации, в котором доступна текущая страница и метод её изменения у вас уже есть. Осталось нарисовать две кнопки, которые будут вызывать onPageChange с page - 1 и page + 1.

У вас подключена третья версия chart.js, а настройки осей имеют формат, использовавшийся во второй. Массивы не нужны, замените xAxes: [{ и yAxes: [{ на x: { и y: {.

Ещё косяк: format: 'DD/MM/YYYY'. Нужное вам свойство называется иначе, замените на parser: 'DD/MM/YYYY'.

На что надо заменить scaleLabel: { (как и его внутреннее содержимое) - смотрите сами.

Правильно будет отказаться от решения указанной проблемы, необходимости в переборе нет. Передавайте в обработчик клика сразу нужный объект:

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

<td @click="onCellClick(item)">

$grouped = [];

foreach ($arr as $key => $items) {
  $group = [
    'UF_SUBJECT' => $items[0]['UF_SUBJECT'],
    'UF_QUANTITY' => 0,
    'UF_BRAK' => 0,
    'UF_WAREHOUSENAME' => [],
  ];

  foreach ($items as $item) {
    $group['UF_QUANTITY'] += $item['UF_QUANTITY'];
    $group['UF_BRAK'] += $item['UF_BRAK'];
    $group['UF_WAREHOUSENAME'][] = $item['UF_WAREHOUSENAME']." (".$item['UF_QUANTITY']." шт)";
  }

  $group['UF_WAREHOUSENAME'] = implode(', ', $group['UF_WAREHOUSENAME']);

  $grouped[$key] = $group;
}

Дичь какая-то - зачем вам хранить количество минут и часов? Достаточно секунд (да, их будет не 0-59, а сколько угодно), минуты и часы вычисляются, если нужны.

сбрасывается на 0 и начинает отсчет с предыдущего состояния

Что неудивительно - метод run работает с "несброшенными" данными. Чтобы иметь доступ к актуальному состоянию, используйте функциональное обновление.

const pick = (obj, keys) => Object.fromEntries(keys.map(k => [ k, obj[k] ]));

const newArr = arr.map(n => pick(n, keys));

Если в элементах arr присутствуют не все keys, и в элементах результирующего массива изначально отсутствующие появиться не должны, тогда

const pick = (obj, keys) =>
  Object.fromEntries(Object.entries(obj).filter(m => keys.includes(m[0])));

// или

const pick = (obj, keys) =>
  keys.reduce((acc, n) => (obj.hasOwnProperty(n) && (acc[n] = obj[n]), acc), {});

Порезать строку на слова, заменить, склеить обратно:

bs = ' '.join(n.upper() if n in cms else n for n in bs.split(' '))

Или можно регулярными выражениями воспользоваться:

for n in cms:
  if n in bs:
    bs = re.sub(f'\\b{n}\\b', n.upper(), bs)

Прячете a, показывать пытаетесь img.

document.querySelectorAll('.photos img').forEach(n => {
  n.parentNode.style.display = +n.alt === alt ? '' : 'none';
});

При поиске надо получить данные пользователя - оттуда достаёте количество репозиториев (свойство public_repos), вычисляете количество страниц.

Добавляете эффект на изменение настроек пагинации - там выполняете загрузку информации о репозиториях.

https://codesandbox.io/s/for-httpsqnahabrcomq99469...

Потому что вы получаете не полный список репозиториев, а только одну страницу (первую). Дефолтное количество элементов на странице - 30. Читайте документацию внимательнее:

per_page integer
The number of results per page (max 100).

Default: 30

function getTimes(start, end, interval) {
  const [ s, e ] = [ start, end ].map(n => moment(n, 'HH:mm'));
  const result = [];

  if (s > e) {
    e.add(1, 'day');
  }

  for (; s <= e; s.add(interval, 'minutes')) {
    result.push(s.format('HH:mm'));
  }

  return result;
}

или, без moment.js (разница невелика, сами видите):

function getTimes(start, end, interval) {
  const [ s, e ] = [ start, end ].map(n => new Date(`2000-01-01 ${n}`));
  const result = [];

  if (s > e) {
    e.setDate(e.getDate() + 1);
  }

  for (; s <= e; s.setMinutes(s.getMinutes() + interval)) {
    result.push(s.toTimeString().split(':', 2).join(':'));
    // или
    result.push(s.toLocaleTimeString('ru', {
      hour: '2-digit',
      minute: '2-digit',
    }));
  }

  return result;
}

использовать, понятное дело, так: const times = getTimes('10:00', '18:00', 30);.

Вместо нескольких стейтов пусть будет один - объект. Общий обработчик onChange достаёт из целевого объекта помимо значения ещё и имя инпута, одновременно являющегося именем обновляемого свойства (его придётся передавать в экземпляры CustomTextField, а внутри самого CustomTextField прокидывать внутрь TextField). Вот так (как добавить два других свойства - думаю, сами догадаетесь):

interface IFormData {
  firstName: string;
  lastName: string;
}

const [ formData, setFormData ] = React.useState<IFormData>({
  firstName: '',
  lastName: '',
});

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setFormData({
  ...formData,
  [e.target.name]: e.target.value,
});

<CustomTextField name="firstName" value={formData.firstName} onChange={onChange} />
<CustomTextField name="lastName" value={formData.lastName} onChange={onChange} />

<!-- или -->

{Object.entries(formData).map(([ k, v ]) => (
  <CustomTextField key={k} name={k} value={v} onChange={onChange} />
))}

Уберите эффект.

Функция получения списка репозиториев - пусть получает в качестве параметра имя пользователя:

async function fetchRepos(username) {
  let result = [];

  try {
    result = (await axios.get(`https://api.github.com/users/${username}/repos`)).data;
  } catch(e) {
    console.error(e);
  }

  setRepos(result);
}

Передавайте её в компонент с формой поиска:

<Search onSearch={fetchRepos} />

Внутри которого ей будет передаваться текущее значение из input'а:

function Search({ onSearch }) {
  const [ searchValue, setSearchValue ] = useState('');

  function onSubmit(e) {
    e.preventDefault();
    onSearch(searchValue);
  }

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={searchValue}
        onChange={e => setSearchValue(e.target.value)}
      />
      <button>Найти</button>
    </form>
  )
}

https://jsfiddle.net/2foy6rbw/

Сложить в массив пары из значения select'а и соответствующего значению имени класса, изменяющего цвет:

const valueAndClass = [
  [ 'yes', 'bg-success' ],
  [  'no', 'bg-warning' ],
];

По событию change перебирать массив, переключать классы в зависимости от равенства соответствующих им значений тому, что выбрано в select'е:

document.querySelector('table').addEventListener('change', e => {
  for (const td of e.target.closest('tr').cells) {
    for (const [ value, className ] of valueAndClass) {
      td.classList.toggle(className, value === e.target.value);
    }
  }
});

Лучше бы конечно задавать класс строке, а не каждой ячейке отдельно. Уберите bg-primary у ячеек, добавьте его строкам, а обработчик события change пусть будет таким, например:

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  const tr = t.closest('tr');
  valueAndClass.forEach(n => tr.classList.toggle(n[1], n[0] === t.value));
});

const $container = $('.promo__cats');
$container.append(...$container
  .children()
  .get()
  .map(n => [ n, +$('.promo__price', n).text().replace(/\D/g, '') ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0])
);