0xD34F

data: () => ({
  links: [ 'tasks', 'kanban', 'activity', 'calendar', 'files' ],
}),

ul
  li(v-for="n in links")
    router-link(:to="{ name: n }") {{ n }}
.marker
  div(v-for="n in links" :class="[ `select${n}`, $route.name === n ? 'active' : '' ]")
    span

const certificate = ref({});

shortingTechItems(certificate.pto)

прилетает undefined

В чем проблема

как исправить?

- const shortingTechItems = (item) => {
-   const arr = [];
-   item.map((i) => {
-     arr.push(Number(i.replace(/\D+/g, "")));
-   });
-   return arr;
- };
+ const shortingTechItems = items => items.map(n => +n.replace(/\D/g, ''));

const voidTags = [ 'input', 'img', 'br', 'hr', ещё какой-то тэг, и ещё, ... ];

function createHTML(data) {
  const attrs = Object
    .entries(data.attrs ?? {})
    .map(n => `${n[0]}="${n[1]}"`)
    .join(' ');

  const startTag = `<${data.tagName}${attrs && (' ' + attrs)}>`;

  if (voidTags.includes(data.tagName)) {
    return startTag;
  }

  const children = (data.subTags ?? [])
    .map(createHTML)
    .join('');

  return `${startTag}${data.text ?? ''}${children}</${data.tagName}>`;
}

def sq(n):
  return '\n'.join('x' * (i + 1) for i in range(n))

Vue cannot detect the following changes to an array <...> When you directly set an item with the index

filterRS.filter_range_value = [ selected_start, selected_end ];

function sum(a, b) {
  const result = [];

  for (
    let i = ~-a.length, j = ~-b.length, overflow = 0;
    i >= 0 || j >= 0 || overflow;
    i--, j--
  ) {
    const digit = (a[i] | 0) + (b[j] | 0) + overflow;
    overflow = +(digit > 9);
    result.push(digit % 10);
  }

  return result.reverse();
}

контейнерСсылок.addEventListener('click', e => {
  const index = e.target.dataset.index;
  if (index) {
    массивМеток[index].balloon.open();
  }
});

массивМеток.forEach(n => {
  n.events.add('balloonopen', onBalloonOpen);
  n.events.add('balloonclose', onBalloonClose);
});

function onBalloonOpen(e) {
  const index = e.get('target').properties.get('index');
  const link = контейнерСсылок.children[index]; /* или, если структура списка ссылок более сложная,
                                                 * как в примере из документации, можно искать нужную
                                                 * через .querySelector(`[data-index="${index}"]`)
                                                 */
  link.scrollIntoView({
    behavior: 'smooth',
  });
  link.classList.add('active');
}

function onBalloonClose(e) {
  const index = e.get('target').properties.get('index');
  контейнерСсылок.children[index].classList.remove('active');
}

.highlight {
  color: white;
  background: red;
}

methods: {
  highlightNames: str => str.replace(/(?<=^|\s)@\S+/g, '<span class="highlight">$&</span>'),
},

arr.map((n, i, a) => a.slice(0, i + 1).join(''))
// или
arr.reduce((acc, n) => (acc.push((acc.at(-1) ?? '') + n), acc), [])

(function xxx(arr, str = '') {
  if (str.length === arr.length) {
    return [];
  }

  const newStr = str.concat(arr[str.length]);
  return [ newStr, ...xxx(arr, newStr) ];
})(arr)

отфильтровать массив по введенному значению в строке поиска в watch-ере

computed: {
  filteredProjects() {
    const search = this.searchString.toLowerCase();

    return this.journal.flatMap(n => {
      return n.savedProjects.filter(m => m.name.toLowerCase().includes(search));
    });
  },
  ...

const circles = reactive(Array.from({ length: 10 }, () => {
  const size = `${50 + Math.random() * 50 | 0}px`;

  return {
    left: `${Math.random() * window.innerWidth | 0}px`,
    top: `${Math.random() * window.innerHeight | 0}px`,
    width: size,
    height: size,
  };
}));

function onMouseMove({ pageX, pageY }) {
  circles.forEach(n => {
    const angle = Math.atan2(-pageX + parseInt(n.left), pageY - parseInt(n.top));
    n.transform = `translate(-50%, -50%) rotate(${angle}rad)`;
  });
}

onMounted(() => document.addEventListener('mousemove', onMouseMove));
onBeforeUnmount(() => document.removeEventListener('mousemove', onMouseMove));

<div v-for="n in circles" :style="n" class="circle"></div>

.circle {
  position: absolute;
  display: inline-block;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 10px solid silver;
  border-bottom-color: black;
  border-radius: 50%;
}

<div class="img">
  <img
    v-if="
      currentSort === tableHeader.name && currentSortDir === 'desc'
    "
    src="https://avatars.mds.yandex.net/i?id=2a00000179dddfd8448e981541c75114a166-4080640-images-thumbs&n=13"
    alt=""
  />
  <img v-else src="https://avatars.mds.yandex.net/i?id=f5c72675790756bfeb0dbe860b634778-5110698-images-thumbs&n=13" alt="" />
</div>

<div class="img" v-if="currentSort === tableHeader.influencerSync">
  <img
    :src="currentSortDir === 'desc'
      ? 'https://avatars.mds.yandex.net/i?id=2a00000179dddfd8448e981541c75114a166-4080640-images-thumbs&n=13'
      : 'https://avatars.mds.yandex.net/i?id=f5c72675790756bfeb0dbe860b634778-5110698-images-thumbs&n=13'
    "
  />
</div>

const values = [ 2, 3, 5, 7, 11, 13, 17, 19, ... ];

useEffect(() => {
  const index = values.indexOf(граничное_значение_второго_инпута);

  setVal2(values
    .slice(...(val1 > граничное_значение_первого_инпута ? [ index ] : [ 0, index ]))
    .reduce((val, n) => Math.abs(val - val2) < Math.abs(n - val2) ? val : n)
  );
}, [ val1, val2 ]);

<transition-group name='slide-components' mode="out-in"

те же атрибуты, что и у <transition> кроме mode

<transition name="slide-components" mode="out-in">
  <p :key="window">{{ window }}</p>
</transition>

<el-select v-model="this.divisions"

<el-option v-for="(dvs, key) in divisions"

const getId = (() => {
  let id = 0;
  return () => ++id;
})();