0xD34F

v-for="n in (condition ? items1 : items2)"

Можно в вычисляемое свойство завернуть:

computed: {
  items() {
    return condition ? this.items1 : this.items2;
  },
},

v-for="n in items"

Переименуйте value в initialValue (это, значит, чтобы название точнее отражало суть), selectedValue сделайте из вычисляемого свойства обычным:

data() {
  return {
    selectedValue: this.initialValue,
  };
},

Ну или подумайте ещё раз над тем, как собираетесь использовать этот компонент - может, он должен уметь работать с директивой v-model? Тогда перепишите сеттер следующим образом:

set(val) {
  this.$emit('input', val);
},

user = next((n for n in users if n['id'] == id), None)

$key = 'shipping_address';
$_arr1 = array_combine(array_column($arr1, $key), $arr1);

$result = [
  ...array_map(fn($n) => $n + ($_arr1[$n[$key]] ?? []), $arr2),
  ...array_diff_key($_arr1, array_combine(array_column($arr2, $key), $arr2))
];

new Date(date * 1000).toLocaleString('en-US', {
  day: 'numeric',
  month: 'long',
  year: 'numeric',
})

const result = [...arr]
  .sort((a, b) => a.length - b.length)
  .reduce((acc, n) => (
    acc.some(m => n.includes(m)) || acc.push(n),
    acc
  ), []);

или

const result = arr.filter((n, i, a) => !a.some((m, j) => i !== j && n.includes(m)));

На время загрузки данных вы уничтожаете компонент пагинации, соответственно, при каждом изменении страницы он создаётся заново - поэтому его внутреннее значение текущей страницы постоянно оказывается дефолтным.

Явно указывайте компоненту пагинации, какую страницу считать текущей (forcePage={currentPage}).

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

У кого надо оборачивать слова: const className = 'doc';.

Как можно обернуть первое слово:

const wrapFirstWord = el =>
  el.innerHTML = el.innerText.replace(/\S+/, '<span>$&</span>');

// или

const wrapFirstWord = el =>
  el.innerHTML = el.innerHTML
    .split(' ')
    .map((n, i) => i ? n : `<span>${n}</span>`)
    .join(' ');

// или

function wrapFirstWord(el) {
  const i = el.textContent.indexOf(' ');
  const span = document.createElement('span');
  span.append(el.textContent.slice(0, i));
  el.replaceChildren(span, el.textContent.slice(i));
}

// или

function wrapFirstWord({ childNodes: [ text ] }) {
  const [ , first, rest ] = text.nodeValue.match(/(\S+)(.*)/);
  const span = document.createElement('span');
  span.appendChild(new Text(first));
  text.nodeValue = rest;
  text.parentNode.insertBefore(span, text);
}

Оборачиваем:

document.querySelectorAll(`.${className}`).forEach(wrapFirstWord);

// или

for (const n of document.getElementsByClassName(className)) {
  wrapFirstWord(n);
}

$arr = [ '...', '...', ... ];
$newStr = preg_replace('~'.implode('|', $arr).'~ui', '', $str);

[ 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), {});