0xD34F

Кого и во что надо обернуть:

const elements = document.querySelectorAll('input[type="button"]');
const wrapperTag = 'div';
const wrapperClass = 'block';

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

elements.forEach(n => {
  const wrapper = document.createElement(wrapperTag);
  n.replaceWith(wrapper);
  wrapper.classList.add(wrapperClass);
  wrapper.append(n);
});

или

for (const n of elements) {
  n.after(document.createElement(wrapperTag));
  n.nextSibling.className = wrapperClass;
  n.nextSibling.appendChild(n);
}

или

for (let i = 0; i < elements.length; i++) {
  const n = elements[i];
  n.outerHTML = `<${wrapperTag} class="${wrapperClass}">${n.outerHTML}</${wrapperTag}>`;
}

или

(function wrap(i, n = elements[i]) {
  if (n) {
    const wrapper = document.createElement(wrapperTag);
    n.parentNode.replaceChild(wrapper, n);
    wrapper.classList.value = wrapperClass;
    wrapper.insertAdjacentElement('afterbegin', n);
    wrap(-~i);
  }
})(0);

Кого надо удалить: const values = [ '1', '2', '3' ];.

Удаляем:

[...select].forEach(n => values.includes(n.value) && n.remove());

или

for (const n of select.querySelectorAll(values.map(n => `[value="${n}"]`))) {
  select.removeChild(n);
}

или

Array.prototype.reduceRight.call(
  select.options,
  (_, n) => ~values.indexOf(n.value) && (n.outerHTML = ''),
  null
);

или

for (let i = select.children.length; i--;) {
  const n = select.children[i];
  for (let j = 0; j < values.length; j++) {
    if (values[j] === n.value) {
      n.replaceWith();
      break;
    }
  }
}

Обычный img у меня не сработал.

Где код, почему не показали, что конкретно пытались делать? Вдруг что-то не то? Да конечно не то - всё работает.

Ещё есть вариант вместо img использовать background-image.

Кто-то невнимательно читал документацию.

Замените product.amount = 1; на Vue.set(product, 'amount', 1);.

Или, замените

product.amount = 1;
state.items.push(product);

на

state.items.push({
  ...product,
  amount: 1,
});

constructor(el) {
  if (typeof el === 'string') {
    el = document.querySelectorAll(el);
  }

  if (typeof el[Symbol.iterator] === 'function') {
    return Array.from(el, n => new Select(n));
  }

  this.$select = el;

  // дальше всё по-старому

Как отфильтровать массив:

const filterArrByObj = (arr, obj) =>
  Object.entries(obj).reduce((arr, [ k, v ]) => {
    return arr.filter(Array.isArray(v)
      ? n => v.includes(n[k])
//           !v.length || v.includes(n[k]), если при пустом массиве допустимо любое значение
      : n => v === n[k]
//           n[k].includes(v), если точное соответствие не нужно
    );
  }, arr);

Отфильтрованные данные оформляете в виде вычисляемого свойства:

computed: {
  filteredData() {
    return filterArrByObj(this.data, this.filters);
  },
},

Значение которого используете при рендеринге таблицы вместо исходных данных:

<tr v-for="n in filteredData">
  ...

fill = tuple(map(int, color['color_shape'].split(' ')))

Классы calc__price и calc__payment заменить на общий calc.

const $price = $('#price');
const $firstPayment = $('#first-payment');

function update($elem) {
  $elem.closest('.calc').find('output').text($elem.val());
  $('.payment-percent').html(Math.round($firstPayment.val() * 100 / $price.val()) + '%');
}


$price.closest('.calc').on('input', function() {
  const val = $price.val();

  $firstPayment
    .val((i, v) => Math.min(v, val))
    .attr('max', val)
    .rangeslider('update', true);

  update($firstPayment);
});

$price.add($firstPayment)
  .rangeslider({ polyfill: false })
  .closest('.calc')
  .on('input', e => update($(e.target)))
  .end()
  .trigger('input');

Рекурсия есть:

function walkNested(val, callback) {
  callback(val);

  if (val instanceof Object) {
    Object.values(val).forEach(n => walkNested(n, callback));
  }
}


walkNested(obj, n => n?.touched === true && (n.touched = false));

Рекурсии нет:

function walkNested(val, callback) {
  for (const stack = [ val ]; stack.length;) {
    const n = stack.pop();
    callback(n);
    stack.push(...Object.values(n ?? {}));
  }
}

Какие ключи хотелось бы иметь: const keys = [ 'city', 'country' ];.

Собираем новый массив:

const newArr = arr.map(n => Object.fromEntries(Object.values(n).map((v, i) => [ keys[i], v ])));

Обновляем существующий:

arr.forEach(n => Object.entries(n).forEach(([ k, v ], i) => (delete n[k], n[keys[i]] = v)));

str.replace(/\t.*/s, '')
// или
str.match(/^[^\t]*/)[0]
// или
str.slice(0, str.search(/\t|$/))
// или
str.split('\t', 1).pop()
// или
[...str].reduceRight((acc, n) => n === '\t' ? '' : n + acc, '')

Никаких ошибок нет, всё правильно, как и должно быть. Сколько есть уникальных ключей - столько записей в map'е и создаётся. Как по одному ключу может быть доступно несколько значений? Никак, это абсурд. Очевидно, вы плохо понимаете, чего хотите сделать.

(?<=id=")\d+

const $menuItems = $('#menu a');
$('#submenu > ul').width(i => $menuItems.eq(i).width());

component 1:

methods: {
  someMethod() {
    ...

component 2:

this.$emit('i-want-to-call-method-from-component-1');

parent:

<component-1 ref="component1" />
<component-2 @i-want-to-call-method-from-component-1="$refs.component1.someMethod()" />

const min = 7;
const max = min + 21;

function update(value) {
  value = Math.max(min, Math.min(max, value | 0));

  $('#spinner2').val(value);
  $('#slider2').slider('value', value);

  const date = new Date();
  date.setDate(date.getDate() + value);
  $('#amount').val(date.toLocaleString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }));
}

$('#slider2').slider({
  range: 'min',
  min,
  max,
  step: 1,
  slide: (e, ui) => update(ui.value),
});

$('#spinner2').spinner({
  min,
  max,
  spin: (e, ui) => update(ui.value),
}).on('input', e => update(e.target.value)).trigger('input');

Сделаем объект, где ключами будут имена типов данных, а значениями - функции сравнения значений соответствующих типов:

const sort = {
  number: (a, b) => a - b,
  string: (a, b) => a.localeCompare(b),
};

Функция сортировки - принимает таблицу (может быть передана в виде элемента или селектора) и индекс столбца, по значениям которого надо отсортировать строки. По индексу столбца стучимся в его заголовок, получаем из него имя типа данных, по имени типа извлекаем функцию сравнения. Из тела таблицы достаём строки, превращаем их в массив, сортируем, добавляем обратно:

function sortTable(table, colIndex) {
  if (typeof table === 'string') {
    table = document.querySelector(table);
  }

  const head = table.tHead.rows[0];
  const compare = sort[head.cells[colIndex].dataset.type] ?? sort.string;
  const value = row => row.cells[colIndex].innerText;
  const tbody = table.tBodies[0];

  tbody.append(...[...tbody.rows].sort((a, b) => compare(value(a), value(b))));
  [...head.cells].forEach((n, i) => n.classList.toggle('sorted', i == colIndex));
}

Стилизуем заголовок столбца, по которому выполнена сортировка:

.sorted {
  background: #ccc;
}
.sorted::after {
  content: " \2193";
}

Всё, можно пользоваться:

// просто дёргаем сортировку
sortTable('#grid', 0);
sortTable(document.querySelector('table'), 1);

// или, сортируем по клику на заголовки столбцов
document.querySelectorAll('#grid th').forEach(function(n) {
  n.addEventListener('click', this);
}, ({ target: t }) => sortTable(t.closest('table'), t.cellIndex));

Такой класс уже есть. Если надо стилизовать ссылку - используйте его.

UPD. Вынесено из комментариев:

А можно как-то присваивать свой класс?

Как-то можно:

computed: {
  activeLink() {
    return this.links.find(n => n.url === this.$route.path);
  },
},

:class="{ active: activeLink === link }"

Одно непонятно - зачем?