kot98

Мало работал с Moment.js, но, вероятно, ошибка в том, что serverAndUserTimeDifference — разница в миллисекундах между датами, а при пробросе её в moment() она считается как дата в UNIX-формате.

Вот примерный код, который работает:

const now = moment();
const serverTime = moment('2024-10-09 10:20:34.987');
const duration = moment.duration(Math.abs(now.diff(serverTime)));
const result = `${duration.days()} ${duration.hours().toString().padStart(2, '0')}:${duration.minutes().toString().padStart(2, '0')}:${duration.seconds().toString().padStart(2, '0')}`;

В vue 2 добавленые после создания ключи объектов не реактивы из-за технических ограничений. (Раньше это большими буквами в доках писалось).
Надо использовать this.$set \ Vue.set при добавлении нового ключа.

В твоём случае можно переделать так:

const templates = reactive(keyBy(templatesArr, 'id'))
for (let templateId in templates) {
  const devices = devicesArr.filter(device => device.templateId === templateId)
  Vue.set(templates[templateId], 'devices', devices);
  Vue.set(templates[templateId], 'settings', {});
}

// либо просто так:
const templates = keyBy(templatesArr, 'id');
for (let templateId in templates) {
  const devices = devicesArr.filter(device => device.templateId === templateId)
  Object.assign(templates[templateId], { devices }, {settings: {}})
}
reactive(templates);

P.S. не помню чтоб в vue 2 было reactive, вместо него был Vue.observable. Но может добавили, хз, лень смотреть.:)

Quasar? У него для таблиц есть готовые варианты с выбором строк.
https://quasar.dev/vue-components/table/#selection

Еще есть vue-eslint правило по порядку атрибутов

Вот вам стайлгайд. Ознакомьтесь.

Нужно получить маску ... по типу 1.1.1.1.1

^\d\.\d\.\d\.\d\.\d$
^(\d\.){4}\d$ [0]

почему при изменении даты передаваемой в пропс не обновляется значение в самом компоненте таймера?

Встречный вопрос - почему вы решили, что внутреннее состояние компонента обновляться должно? Покажите, где вы обновляете targetDate при изменении props.date. Нет, можете себя не утруждать - ничего такого у вас нет.

Не надо никакого targetDate, рассчитываем дни-часы-минуты-секунды сразу на основе props.date - так при изменении props.date не придётся предпринимать никаких дополнительных телодвижений, всё посчитается как надо при следующем вызове updateCountdown. Вот как-то так.

const updateItems = async ({ id, isShow = false }: Partial<{ id: number, isShow: boolean }>) => {};

Один из вариантов, сделать с помощью псевдоэлементов и svg. Сделано по картинке, на глаз :)

Как я уже написал, код рабочий. Но его можно немного улучшить:

var o = {
    value: {
        orders: {
            tools: [
                {
                    tool1: 't1'
                }
            ],
            wood: [
                {
                    wood1: 'w1',
                }
            ],
        },
    }
}

var allOrders = [];
var ordersByType = o.value?.orders || {};

Object.keys(ordersByType).forEach((type) => {
    ordersByType[type].forEach((order) => {
        allOrders.push({
            ...order,
            type,
        });
    });
});

o.value.orders = allOrders;

Можно использовать и reduce, чтобы сэкономить пару строк, но многие (и я в их числе) считают, что использование этого метода сильно ухудшает читаемость кода.

jquery:

const currentSlide = swp.slides[activeIndex]
const btn = $(currentSlide).find('.header-banner-swiper__slide-btn');

vanilla:

const currentSlide = swp.slides[activeIndex]
const btn = currentSlide.querySelector('.header-banner-swiper__slide-btn');

Поменяй: props.item.office на 'office' in props.item.
Ты не можешь обращаться к свойству которого нет сразу во всех типах union'a. Но ты можешь проверить его наличие, а дальше ts, в зависимости от результата, сузит тип до того, в котором оно присутствует.

Никак не использовать. Хотите тут computed - вместо одного значения пусть предоставляет массив:

const names = computed(() => list.map(n => (n.main ?? n.default).name));

<div v-for="n in names">
  {{ n }}
</div>

const scrollThreshold = 1; // Твоя погрешность

if (popupScroll.scrollHeight - popupScroll.scrollTop <= popupScroll.clientHeight + scrollThreshold) {
  // Проскролили блок до конца
}

const popup = document.querySelector('.popup');
const pseudoElement = popup.querySelector('::before');
popup.addEventListener('scroll', function() {
  if (popup.scrollHeight - popup.scrollTop === popup.clientHeight) {
    pseudoElement.style.display = 'none';
  } else {
    pseudoElement.style.display = 'block';
  }
});

https://learn.javascript.ru/onscroll
https://learn.javascript.ru/size-and-scroll

::before {
  pointer-events: none;
}

https://developer.mozilla.org/en-US/docs/Web/Event...

const doSmth = () => {
   const event = new Event('doSmth');
   window.dispatchEvent(event);
   console.log('do something')
}

https://developer.mozilla.org/ru/docs/Web/API/Even...
Пример, где событие myEvent отправляется после нажатия на кнопку #pew:

const event = new Event('myEvent'); // создаем кастомное событие myEvent

pew.addEventListener('click', function() { // слушаем клик по кнопке
  circle.dispatchEvent(event); // отправляем событие myEvent
});

circle.addEventListener('myEvent', function(evt) { // слушаем событие myEvent
  // какая-то полезная нагрузка
  console.log(evt.target);
});

https://jsfiddle.net/Stalk/ujd2t5og/