0xD34F

<template v-for="v, k in tableData">
  <tr>
    <td>{{ k }}</td>
  </tr>
  <tr v-for="n in v">
    <td>{{ n.name }}</td>
  </tr>
</template>

[^\/]+(?=\/?$)

.*(?=(?:\/[^\/]+){2}\/?$)

Главный косяк:

tableValues(element);

Как вы собираетесь перебирать элемент? Это абсурд. Должно быть element.children/element.childNodes.

Косяки помельче:

document.querySelector('form').childNodes

Поскольку вам нужны только input'ы и select'ы, то не надо перебирать заведомо лишнее - используйте children вместо childNodes. Ну и погуглите, в чём между ними разница.

if (element.nodeType == 1 && element.nodeName == 'INPUT' || element.nodeName == 'SELECT') {

Проверка значения nodeType лишняя. Кроме того, вам не помешает разобраться с приоритетом выполнения операторов - nodeType вы тут проверяете только для input'а.

let result = [];

Почему эта штука объявляется вне функции, а наполняется внутри? Что, перед каждым вызовом функции будете вручную обнулять результат? Надо создавать массив со значениями внутри функции, и возвращать его как результат её выполнения.

Ну и конечно всё это делается несколько короче:

const getValues = el =>
  el instanceof Element
    ? [ 'INPUT', 'SELECT' ].includes(el.tagName)
      ? [ el.value ]
      : [...el.children].flatMap(getValues)
    : [];

// или

const getValues = el =>
  [ 'INPUT', 'SELECT' ].includes(el?.tagName)
    ? [ el.value ]
    : [].flatMap.call(el.children ?? [], getValues);



const values = getValues(document.querySelector('form'));

Или ещё короче - если без рекурсии:

const values = Array.from(document.querySelector('form').elements, n => n.value);

А вообще, можно и в более общем виде задачу решить - если сделать проверку узла и получение данных из него параметрами функции:

const getFromDOMNodes = (node, test, getVal) =>
  node instanceof Node
    ? Array.prototype.reduce.call(
        node.childNodes,
        (acc, n) => (acc.push(...getFromDOMNodes(n, test, getVal)), acc),
        test(node) ? [ getVal(node) ] : []
      )
    : [];


const values = getFromDOMNodes(
  document.querySelector('form'),
  node => [ 'INPUT', 'SELECT' ].includes(node.nodeName),
  node => node.value
);

есть ли какие то сайты чтобы переписало с py на js ?

Есть.

Как может работать то, что вы не используете?

<div className={classes.bar1}></div>

Класс bar1 есть, это хорошо. А почему нет bar? Плохо.

UPD. Ну и в целом многословно как-то. Зачем копипастить по двенадцать раз одно и то же? В createUseStyles заменяем все barN на

...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [
  `bar${i + 1}`,
  {
    transform: `rotate(${i * 30}deg) translate(0, -130%)`,
    animationDelay: `${i * 0.1 - 1.2}s`,
  },
])),

А в компоненте Loader пусть будет так:

<div className={`${classes.loader} js--loader`}>
  {Array.from(
    { length: 12 },
    (_, i) => <div className={`${classes.bar} ${classes[`bar${i + 1}`]}`}></div>
  )}
</div>

А что, сгруппировать массив data по значениям свойства type - нет, никак? А компонент аккордеона отдельный сделать - тоже никак? Предлагаю всё-таки подумать в эту сторону. Ну а пока - говнокод:

app.component:

opened = {}

get currentTabItems() {
  return this.data.filter(n => n.type === this.tabs[this.activeTab].toLowerCase());
}

<app-navbar [tabs]="tabs" [(activeTab)]="activeTab"></app-navbar>
<app-faq
  *ngFor="let item of currentTabItems;"
  [item]="item"
  [opened]="opened[item.type] === item"
  (toggle)="opened[item.type] = $event ? item : null"
></app-faq>

faq.component:

@Input() opened;
@Output() toggle = new EventEmitter();

<div class="faq__box" [class.isOpen]="opened" (click)="toggle.emit(!opened)">

проблема в том, что один из маркеров уезжает на реку Нева

Оба маркера уезжают. Из Петербурга под Вязьму. Или даже в Иран. Что, не пробовали масштаб уменьшать?

Среди настроек маркера есть iconImageOffset - разберитесь, что это, для чего предназначена. А потом укажите какое надо значение.

from collections import Counter

count = Counter(s)
sorted_count = sorted(count.items(), key=lambda n: n[1], reverse=True)

for n in sorted_count[:3]:
  print(f'"{n[0]}" - {n[1]}')

data: () => ({
  value: 1,
  step: 0.25,
}),
methods: {
  updateValue(up) {
    const { value, step } = this;
    const rounded = Math[up ? 'floor' : 'ceil'](value / step) * step;
    this.value = rounded + step * (up ? 1 : -1);
  },
},

<input v-model.number="value">
<button @click="updateValue(0)">-</button>
<button @click="updateValue(1)">+</button>

\d+(?=\D*$)

Возникает проблема, что нужно нажать 2 раза на подсказку, чтобы она исчезла.

Не она, а они. Выбираете подсказку - значение меняется. Поменялось значение - запускается эффект, в котором заново вычисляется массив подсказок, и они отображаются.

Может, вместо эффекта вам стоит вычислять массив подсказок в обработчике onChange:

const onChange = ({ target: { value } }) => {
  setVal(value);
  setPrintVariables(value.length > 1
    ? arrayVariables.filter(n => n.includes(value))
    : []
  );
};

<input value={val} onChange={onChange} />

??

Что, в одно ухо влетело, из другого вылетело? - один из косяков переехал сюда из предыдущего вопроса, вместо . здесь должны быть $:

'&:checked + .todo-item__span::before'

'&:checked + .todo-item__span::after'

Одной пустой строки недостаточно:

'content': '',

'content': '""',

'todo-item--checked': {
    'border': '2px solid #2196f3',
    ' box-shadow': '0 0 10px 3px #2196f3',
},

'todo-item--checked .todo-item__description': {
    'color': '#6495EDFF',
},

'todo-item--checked': {
  'border': '2px solid #2196f3',
  'box-shadow': '0 0 10px 3px #2196f3',
  '& $todo-item__description': {
    'color': '#6495EDFF',
  },
},

<div className={`
    ${classes['todo-item__description']}
    ${classes['todo-item--checked .todo-item__description']}
`}>

<div className={classes['todo-item__description']}>

Я так понимаю, вот она, причина, подъехала с версией 18.0.0:

Consistent useEffect timing: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event.

Т.е., жмёте на кнопку, открывается окно, запускается эффект, устанавливается обработчик клика на document, дальше событие клика по кнопке продолжило всплывать и попало в только что установленный обработчик.

При добавлении задержки, данная проблема уходит

Можете ещё попробовать ловить событие в фазе погружения:

document.addEventListener('click', handleOutsideClick, true);
return () => document.removeEventListener('click', handleOutsideClick, true);

const components = [
  [   'Day', Components1 ],
  [  'Week', Components2 ],
  [ 'Month', Components3 ],
  [  'Year', Components4 ],
];

const [ active, setActive ] = useState(-1);
const Component = components[active]?.[1];
const onClick = e => setActive(+e.target.dataset.index);

{components.map((n, i) => <button data-index={i} onClick={onClick}>{n[0]}</button>)}
{Component && <Component />}

Раз подобный режим работы не предусмотрен, придётся закостылить.

Устанавливаем наблюдение за массивом выбранных значений, ищем добавленное значение, рекурсивно обходим дерево с данными в поисках соответствующего элемента, запоминая значения предков, обновляем массив выбранных значений - к тем, что там уже есть добавляем предков добавленного значения:

watch(values, (newValues, oldValues) => {
  const addedValue = newValues.find(n => !oldValues.includes(n));
  if (addedValue) {
    const findAncestorValues = (arr, val, values = []) =>
      (Array.isArray(arr) ? arr : []).reduce((found, n) => {
        if (!found) {
          values.push(n.value);
          found = n.value === val ? [...values] : findAncestorValues(n.children, val, values);
          values.pop();
        }
        return found;
      }, null);

    values.value = [...new Set([ ...values.value, ...findAncestorValues(data, addedValue) ])];
  }
});

Если нежелательно реагировать на какие-либо иные изменения массива выбранных значений, кроме тех, что обусловлены действиями пользователя, то тогда вместо использования watch необходимо слушать у el-tree-select событие обновления массива выбранных значений. При этом, чтобы иметь доступ к предыдущей версии этого массива, надо будет немного поработать руками. Как-то так:

const oldValues = ref([]);

function onUpdate() {
  const addedValue = values.value.find(n => !oldValues.value.includes(n));
  if (addedValue) {
    // тут всё по-прежнему
  }

  oldValues.value = values.value;
}

<el-tree-select
  @update:modelValue="onUpdate"
  ...

В корне дерева комментариев храните идентификатор того, на который в данный момент пишется ответ, отдавайте его через provide / inject во вложенные компоненты, в которых, в зависимости от равенства полученного значения конкретному id, показывайте поле для ответа.

https://jsfiddle.net/5uw1v9o6/

ключ уже есть

А потом раз - и ключа нет, undefined - это не ключ. Откуда берётся undefined? Из-за отсутствия свойства id, значение которого должно быть ключом. Как оно пропадает? Да вот так:

return {
  ...emojis, count: emoji.count + 1
}

С какой целью вы делаете свойствами элемента массива все элементы самого массива?

const values = {
  RUS: [ 'раз значение', 'два значение', 'три' ],
  US: [ '...', '...', '...' ],
  // ...
};

const items = document.querySelectorAll('li');
const buttons = document.querySelectorAll('button');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: { innerText: key } }) {
  items.forEach(function(n, i) {
    n.innerText = this[i] ?? `ЗНАЧЕНИЕ #${i} ДЛЯ ${key} НЕ ЗАДАНО`;
  }, values[key] ?? []);
}