0xD34F

selects[0].appendChild(option)
selects[1].appendChild(option)

Как один элемент может одновременно находиться внутри двух других элементов? Очевидно же, что никак:

Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция appendChild() перемещает его из текущей позиции в новую позицию

Это должны быть два разных option'а. Можете во втором случае добавлять копию:

selects[1].appendChild(option.cloneNode(true));

Но вообще, вариант так себе. Появится ещё один select - побежите копипастить строку с добавлением option'а? Надо сделать цикл по select'ам. Например, так:

selects.forEach(function(n) {
  n.append(...this.map(m => new Option(m[1].label, m[0])));
}, Object.entries(metrics.convertRules));

Или, можно собирать html вместо создания отдельных элементов:

const optionsHTML = Object
  .entries(metrics.convertRules)
  .map(n => `<option value="${n[0]}">${n[1].label}</option>`)
  .join('');

selects.forEach(n => n.innerHTML = optionsHTML);

Выбранные значения:

data: () => ({
  selected: [ null, null, null ],
  ...
}),

Получение массивов данных для селектов:

computed: {
  selectData() {
    const data = Array.from({ length: this.selected.length }, () => []);

    for (let { items } = this.selectors, i = 0; items && i < data.length; i++) {
      data[i] = items;
      items = items.find(n => n.value === this.selected[i])?.childs;
    }

    return data;
  },
  ...
},

Сброс выбранных значений:

methods: {
  resetSelected(index) {
    for (let i = index; i < this.selected.length; i++) {
      this.selected[i] = null;
    }
  },
  ...
},

Собираем всё вместе:

<v-col v-for="(n, i) in selected" cols="4">
  <v-select
    :items="selectData[i]"
    item-text="title"
    item-value="value"
    v-model="selected[i]"
    @change="resetSelected(i + 1)"
  ></v-select>
</v-col>

"Добавить"? Понятно, почему ничего не получается - формы добавляются динамически, так что обработчики событий вы пытаетесь назначать элементам, которых ещё нет. Применим делегирование - обработчик добавляем один раз, выше форм, проверяем целевой элемент, если это оказался интересующий нас input, то получаем из него элемент формы (поднимаемся или просто по ссылке, если ваша форма действительно является формой), из элемента формы получаем input'ы (ищем или опять же, если у вас там <form>, то доступна коллекция ссылок) и элемент, в который надо записать результат вычислений.

document.addEventListener('input', e => {
  if (e.target.classList.contains('form-control')) {
    const form = e.target.closest('тут селектор формы');
    form.querySelector('span').innerText = Array.prototype.reduce.call(
      form.querySelectorAll('input.form-control'),
      (acc, n) => acc * (+n.value || 0),
      1
    );
  }
});

// или

document.addEventListener('input', ({ target: t }) => {
  if (t.matches('.form-control')) {
    t.form.querySelector('span').textContent = Array
      .from(t.form.elements)
      .reduce((acc, n) => acc * (n.value | 0), 1);
  }
});

$result = array_sum(array_filter(
  array_count_values($all_items),
  fn($n) => in_array($n, $filters),
  ARRAY_FILTER_USE_KEY
));

или

$result = count(array_intersect($all_items, $filters));

const data = Object.entries(сюда кидаете свои данные);

const years = Array
  .from(new Set(data.flatMap(n => Object.keys(n[1].G))))
  .sort((a, b) => a - b);

const columns = Array
  .from(new Set(data.flatMap(n => Object.values(n[1].G).flatMap(Object.keys))))
  .sort();

<TableHead>
  <TableRow>
    <TableCell rowSpan={2}>regions</TableCell>
    {years.map(n => <TableCell colSpan={columns.length}>{n}</TableCell>)}
  </TableRow>
  <TableRow>
    {years.flatMap(n => columns.map(m => <TableCell>{m}</TableCell>))}
  </TableRow>
</TableHead>
<TableBody>
  {data.map(([ region, { G } ]) => (
    <TableRow>
      <TableCell>{region}</TableCell>
      {years.flatMap(n => columns.map(m => <TableCell>{G[n]?.[m]?.value ?? 0}</TableCell>))}
    </TableRow>
  ))}
</TableBody>

Есть такая структура данных - стек называется.

При встрече открывающей скобки добавляем в результирующий массив пару индексов - открывающей и закрывающей скобок. Второе значение, так как закрывающей скобки ещё нет, пока будет null. В стек сохраняем индекс, под которым добавленная пара оказалась в массиве с результатами.

Встретили закрывающую скобку - извлекаем из стека индекс последнего неполного результата, заменяем там null на индекс встреченной скобки. Конечно, если в стеке что-то есть. Если стек пустой - значит, у встреченной закрывающей скобки не было соответствующей ей открывающей, добавляем в результирующий массив пару из null и текущего индекса.

function bracketIndices(str) {
  const stack = [];
  const result = [];

  for (let i = 0; i < str.length; i++) {
    if (str[i] === '{') {
      stack.push(result.push([ i, null ]) - 1);
    } else if (str[i] === '}') {
      if (stack.length) {
        result[stack.pop()][1] = i;
      } else {
        result.push([ null, i ]);
      }
    }
  }

  return result;
}


bracketIndices('{}{{{}}}') // [[0,1],[2,7],[3,6],[4,5]]
bracketIndices('---}{{}{') // [[null,3],[4,null],[5,6],[7,null]]
bracketIndices('fuck off') // []

arr.reduce((acc, n) => (
  n = n.match(/(\S+) = (.*)/),
  n && (acc[n[1]] = n[2]),
  acc
), {})

или

Object.fromEntries(arr
  .map(n => n.split(': ').pop().split(' = '))
  .filter(n => n.length === 2)
)

Как опознать кнопки +/-, как обновить значение:

const plusSelector = '.count-plus';
const minusSelector = '.count-minus';

function updateCount(el, change) {
  const counterEl = el.closest('.count-wrapper').querySelector('.counter');
  counterEl.innerText = Math.max(0, +counterEl.innerText + change);
}

Слушать клики можно непосредственно на кнопках:

function setClickHandler(selector, change) {
  document.querySelectorAll(selector).forEach(function(n) {
    n.addEventListener('click', this);
  }, e => updateCount(e.target, change));
}

setClickHandler(plusSelector, 1);
setClickHandler(minusSelector, -1);

Или на каком-нибудь их общем предке:

document.addEventListener('click', ({ target: t }) => {
  const change = +t.matches(plusSelector) || -t.matches(minusSelector);
  if (change) {
    updateCount(t, change);
  }
});

items_dict = {}

for i in range(len(data)):
  for n in data[i]['balance']['StringList']['String']:
    if n['Code'] not in items_dict:
      items_dict[n['Code']] = [ n['Name'], n['Code'], *[ 'None' ] * len(data) ]

    items_dict[n['Code']][i + 2] = n['Value']

items_arr = list(items_dict.values())

В документации не нашел ответа, как и похожего решения.

Плохо искали.

Пример с изменённым цветом кластера в документации карт - раз. Пример с использованием кластера в документации vue-yandex-maps - два. Осталось объединить.

$sum = array_sum(array_column($arr, 'price'));
foreach ($arr as &$n) {
  $n['weight'] = number_format($n['price'] / $sum * 100, 2).'%';
}

Вместо

mounted() {
  this.fetchPosts()
},

пусть будет

watch: {
  '$route.query.page': {
    immediate: true,
    handler: 'fetchPosts',
  },
},

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

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

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

return {
  ...state,
  items: state.items.includes(action.payload)
    ? state.items.filter(n => n !== action.payload)
    : [ ...state.items, action.payload ],
};

Или, при использовании redux-toolkit, вместо проверки наличия элемента ищем его индекс:

const index = state.items.indexOf(action.payload);
if (index === -1) {
  state.items.push(action.payload);
} else {
  state.items.splice(index, 1);
}

<script setup>
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';

const onSwiper = (swiper) => console.log(swiper);
const onSlideChange = () => console.log('slide change');
const modules = [ Navigation, Pagination, Scrollbar, A11y ];
</script>

<style>
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import 'swiper/css/scrollbar';
</style>

return arr.forEach((fn) => {

Понятно.

Вот дураки вроде вас: раз дурак, два дурак, три дурак, четыре, пять.

Функция суммирования:

function sum(data, key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  let result = 0;

  for (const n of data) {
    result += +getVal(n) || 0;
  }

  return result;
}

Элементы могут быть представлены как jquery-объект, NodeList или HTMLCollection (ну и разумеется, обычный массив, если что, тоже будет обсчитан как надо):

const $form = $('form').on('change', 'select', () => {
  $('#result').val(sum($form.find('select'), n => $(n).val()));
});

const input = document.querySelector('#result');
const selects = document.querySelectorAll('form select');
const onChange = () => input.value = sum(selects, 'value');
selects.forEach(n => n.addEventListener('change', onChange));

document.querySelector('form').addEventListener('change', function(e) {
  if (e.target.tagName === 'SELECT') {
    document.getElementById('result').value = sum(
      this.getElementsByTagName('select'),
      n => n.selectedOptions[0].getAttribute('value')
    );
  }
});

document.forms[0].onchange = ({ target: t }) => {
  if (t.matches('select')) {
    t.form.result.value = sum(
      t.form.querySelectorAll('option:checked:not(:disabled)'),
      n => n.attributes.value.value
    );
  }
};

А что за задача-то решается? Нужен гибрид радиокнопки и чекбокса?

Вариант раз, радиокнопки:

let checked = null;

$('input').click(function() {
  checked = checked === this.value ? null : this.value;
  this.checked = !!checked;
});

// или

document.querySelectorAll('input').forEach(function(n) {
  n.addEventListener('click', this);
}, function({ target: t }) {
  t.checked = !!(this[0] = this[0] === t ? null : t);
}.bind([]));

Вариант два, с заменой радиокнопок чекбоксами:

const $checkboxes = $('input').change(function() {
  if (this.checked) {
    $checkboxes.not(this).prop('checked', false);
  }
});

// или

const checkboxes = document.querySelectorAll('input');
const onChange = e => checkboxes.forEach(n => n.checked &&= n === e.target);
checkboxes.forEach(n => n.addEventListener('change', onChange));

Вариант три - вместо того, чтобы изменять значение свойства checked вручную, добавьте ещё одну радиокнопку, которая будет обозначать отсутствие выбора.

const sum5 = (...args) =>
  args.length > 4
    ? args.slice(0, 5).reduce((acc, n) => acc + n, 0)
    : sum5.bind(null, ...args);
//  или
//  : (...args2) => sum5(...args, ...args2);

markRaw