0xD34F

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

const coords = ref([ 50, 50 ]);

const circleStyles = computed(() => ({
  left: `${coords.value[0]}px`,
  top: `${coords.value[1]}px`,
}));

const updateCoords = e => coords.value = [ e.pageX, e.pageY ];
const updateCoordsOn = () => document.addEventListener('mousemove', updateCoords);
const updateCoordsOff = () => document.removeEventListener('mousemove', updateCoords);

<div
  class="circle"
  :style="circleStyles"
  @mousedown="updateCoordsOn"
  @mouseup="updateCoordsOff"
></div>

Потому что возможность указывать аргумент для v-model появилась в третьей версии vue.

Вместо v-model используйте sync.

Документацию следует изучать внимательнее:

mousewheel: {
  releaseOnEdges: true,
},

function createTree($data, $params = []) {
  extract($params + [
    'levelKey' => 'level',
    'childrenKey' => 'children',
  ]);

  $root = [];

  foreach ($data as $n) {
    $arr = &$root;

    for (
      $level = $data[0][$levelKey];
      $level++ < $n[$levelKey];
      $arr = &$arr[count($arr) - 1][$childrenKey]
    ) ;

    $arr[] = $n + [ $childrenKey => [] ];
  }

  return $root;
}


$tree = createTree($arMenu, [ 'levelKey' => 'LEVEL' ]);

или

function createTree($data, $params = []) {
  $levelKey = $params['levelKey'] ?? 'level';
  $childrenKey = $params['childrenKey'] ?? 'children';

  $root = [];
  $stack = [ [ $data[0][$levelKey], &$root ] ];

  foreach ($data as $n) {
    $end = end($stack);
    $level = $n[$levelKey];

    if ($level > $end[0]) {
      $stack[] = [ $level, &$end[1][count($end[1]) - 1][$childrenKey] ];
    } else while ($level < end($stack)[0]) {
      array_pop($stack);
    }

    end($stack)[1][] = array_merge($n, [ $childrenKey => [] ]);
  }

  return $root;
}

Что имеет сказать на этот счёт документация:

The functions passed to the reducers parameter can be accessed through the caseReducers return field.

Так что

playlistSlice.caseReducers.playAudio(state, { payload: state.id });

.panel {
  padding: 0 15px;
  transition: all 0.4s;
  height: 0;
  overflow: hidden;
}

.faq-item.active .panel {
  padding: 15px 15px 20px;
}

.faq-item.active .cross {
  transform: rotate(45deg);
}

const containerSelector = '.faq-list';
const itemSelector = '.faq-item';
const headerSelector = '.accordion';
const contentSelector = '.panel';
const activeClass = 'active';
const toggle = item => item
  ?.closest(containerSelector)
  ?.querySelectorAll(itemSelector).forEach(n => {
    const state = n === item && !n.classList.contains(activeClass);
    const content = n.querySelector(contentSelector);
    n.classList.toggle(activeClass, state);
    content.style.height = `${state ? content.scrollHeight : 0}px`;
  });

document.addEventListener('click', e => {
  toggle(e.target.closest(headerSelector)?.closest(itemSelector));
});

// или

document.querySelectorAll(headerSelector).forEach(n => {
  n.addEventListener('click', toggle.bind(null, n.closest(itemSelector)));
});

<div v-once>
  <select ref="select" v-model="region"></select>
</div>

mounted() {
  const choices = new Choices(this.$refs.select);
  this.$watch(
    'regions',
    val => choices.setChoices(val, 'value', 'name', true),
    { immediate: true }
  );
  this.$on('hook:beforeDestroy', () => choices.destroy());
},

Вместо выдёргивания координат из стилей лучше будет сделать массив с координатами, обновлять этот массив, и уже на его основе задавать translate элементу. А чтобы не делать отдельные обработчики клика всем кнопкам, можно записать им в data-атрибут информацию о том, на сколько какие координаты должна изменить данная кнопка.

<button data-steps="1,0">right</button>
<button data-steps="-1,0">left</button>
<button data-steps="0,1">down</button>
<button data-steps="0,-1">up</button>
<button data-steps="1,1">right down</button>
<button data-steps="0,-2">double up</button>

const coord = [ 0, 0 ];
const stepSize = 30;

const box = document.querySelector('#box');
const buttons = document.querySelectorAll('[data-steps]');

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

function onClick() {
  this.dataset.steps.split(',').forEach((n, i) => coord[i] += n * stepSize);
  box.style.transform = `translate(${coord.map(n => `${n}px`).join(',')})`;
}

Назначайте класс в зависимости от значения свойства, которое будет устанавливаться в обработчиках событий load и error. Например.

Сделать массив:

const arr = [
  [      'author', 'Author - ' ],
  [        'name',      'Name' ],
  [ 'currentTime',     '00:00' ],
  [    'duration',     '00:00' ],
];

Который надо что? - правильно, перебрать, так или иначе:

for (const [ className, text ] of arr) {
  titleElement.appendChild(create({
    el: 'span',
    className,
    text,
  }));
}

// или

titleElement.append(...arr.map(n => create({
  el: 'span',
  className: n[0],
  text: n[1],
})));

// или, без всех этих ваших странных функций

document.querySelector('#root').innerHTML = `
  <div id="title">${arr.map(n => `
    <span class="${n[0]}">${n[1]}</span>`).join('')}
  </div>
`;

Не надо ничего отнимать, что-то изменилось - посчитали всё с нуля:

const questionEl = document.querySelector('ul');
const resultsEl = document.querySelector('p span');

questionEl.addEventListener('change', showResults);

function showResults() {
  resultsEl.innerText = Array.prototype.reduce.call(
    questionEl.querySelectorAll('input[type="radio"]:checked'),
    (acc, n) => acc + +n.value,
    0
  );
}

А вообще, правильно было бы показывать результат только после получения всех ответов; вопросы показывать по одному; не зашивать в разметку вопросы и варианты ответов. Как-то так.

Сгруппируйте данные по координатам:

const grouped = productData.reduce((acc, n) => (
  (acc[n.coordinates] ??= []).push(n),
  acc
), {});

Соответственно, когда будете собирать строку для ballonContent метки, вместо одного объекта придётся пробежать по массиву объектов:

for (const [ coord, data ] of Object.entries(grouped)) {
  const placemark = new ymaps.Placemark(
    coord.split(',').map(parseFloat),
    {
      balloonContent: data
        .map(n => `
          <div>
            ${n.address}
            <br>
            <a href="${n.productURL}">Подробнее</a>
          </div>`)
        .join(''),
    },
    {
      preset: 'islands#blueDotIcon',
      maxWidth: 300,
    }
  );

  map.geoObjects.add(placemark);
}

Или, воспользуйтесь кластеризатором:

const placemarks = productData.map((n, i) => new ymaps.Placemark(
  n.coordinates.split(',').map(parseFloat),
  {
    balloonContent: `${n.address}<br><a href="${n.productURL}">Подробнее</a>`,
    clusterCaption: `Адрес №${i + 1}`,
  },
  {
    preset: 'islands#blueDotIcon',
    maxWidth: 300,
  }
));

const clusterer = new ymaps.Clusterer({
  clusterDisableClickZoom: true,
});

clusterer.add(placemarks);
map.geoObjects.add(clusterer);

Вместо того, чтобы перебирать "алфавит" и заменять символы по одному, перебирайте "зашифрованный" текст и подставляйте вместо текущего символа соответствующий ему из "алфавита":

decoded = ''.join(data_crypt.get(n, n) for n in text)
print(decoded)

https://jsfiddle.net/fbex5azy/1/

Где чекбоксы находятся, что за чекбоксы, каковы ограничения на количество отмеченных, как посчитать количество отмеченных:

const container = document.querySelector('селектор общего предка чекбоксов');
const checkboxSelector = 'селектор чекбоксов';
const minChecked = 1;
const maxChecked = Infinity;
const countChecked = checkboxes =>
  Array.prototype.reduce.call(checkboxes, (acc, n) => acc + n.checked, 0);

Если количество отмеченных чекбоксов меньше или равно минимально допустимому - блокируйте их, если количество отмеченных чекбоксов больше или равно максимально допустимому - блокируйте те, что не отмечены:

const checkboxes = container.querySelectorAll(checkboxSelector);
const onChange = () => {
  const count = countChecked(checkboxes);
  const minReached = count <= minChecked;
  const maxReached = count >= maxChecked;
  checkboxes.forEach(n => n.disabled = minReached && n.checked || maxReached && !n.checked);
};

checkboxes.forEach(n => n.addEventListener('change', onChange));

Или, выставляйте снятый чекбокс обратно, если количество отмеченных упало ниже минимума и снимайте выставленный, если количество отмеченных превысило максимум:

container.addEventListener('change', function({ target: t }) {
  if (t.matches(checkboxSelector)) {
    const count = countChecked(this.querySelectorAll(checkboxSelector));
    t.checked ||= count < minChecked;
    t.checked &&= count <= maxChecked;
  }
});

Посмотрите на результат выполнения следующего кода с [Symbol.iterator]() { return this; } и без:

const iter = new Range(1, 5)[Symbol.iterator]();
console.log(iter.next().value);
console.log(iter.next().value);
console.log([...iter]);

Пытаюсь так:

let currentIndex = $(".js-practice_button.current").index();

Но значение всегда 0, у какой бы кнопки класс current не присутствовал.

Потому что метод index по умолчанию определяет индекс элемента среди соседей, а так как у каждой кнопки есть отдельный родитель... Ну да, получаете то, что получаете.

Можно вместо индекса кнопки определять индекс родителя:

const index = $('.js-practice_button.current').closest('li').index();

Или, если указать методу index в качестве параметра селектор, то индекс будет определятся не среди соседей, а среди элементов, соответствующих селектору:

const index = $('.js-practice_button.current').index('.js-practice_button');

А вообще, к чёрту jquery. Есть варианты и на чистом js:

const container = document.querySelector('.js-practices_buttons');
const itemSelector = '.practice_item';
const buttonSelector = `${itemSelector} .js-practice_button`;
const activeClass = 'current';
const activeSelector = `.${activeClass}`;

const index = Array.prototype.findIndex.call(
  container.querySelectorAll(buttonSelector),
  n => n.classList.contains(activeClass)
);

// или

const { children } = container;
let index = children.length;
while (index-- && !children[index].matches(`:has(${activeSelector})`)) ;

// или

const index =
  (el => el ? [...el.parentNode.children].indexOf(el) : -1)
  (container.querySelector(`${itemSelector}:has(${activeSelector})`));

// или

let index = -1;
for (
  let el = container.querySelector(activeSelector)?.closest(itemSelector);
  el;
  el = el.previousElementSibling, index++
) ;

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

const noRepeatingDigits = num => !/(\d).*\1/.test(num);

// или

const noRepeatingDigits = num => -~Math.log10(num) === new Set(`${num}`).size;

// или

const noRepeatingDigits = num => [...'' + num].every((n, i, a) => i === a.indexOf(n));

// или

const noRepeatingDigits = num => String(num)
  .split('')
  .reduce((acc, n) => (acc[n]++, acc), Array(10).fill(0))
  .every(n => n < 2);

// или

const noRepeatingDigits = num =>
  !''.match.call(num, /./g).some(function(n) {
    return this[n] = Object.hasOwn(this, n);
  }, {});

// или

const noRepeatingDigits = num =>
  !Array.from(num.toString()).sort().find((n, i, a) => n === a[i + 1]);

Теперь массив. Можно удалить ненужное из существующего:

arr.splice(0, arr.length, ...arr.filter(noRepeatingDigits));

// или

let numDeleted = 0;

for (const [ i, n ] of arr.entries()) {
  arr[i - numDeleted] = n;
  numDeleted += !noRepeatingDigits(n);
}

arr.length -= numDeleted;

// или

for (let i = arr.length; i--;) {
  if (!noRepeatingDigits(arr[i])) {
    arr.splice(i, 1);
  }
}

Или собрать новый:

const newArr = arr.filter(noRepeatingDigits);

// или

const newArr = [];

for (const n of arr) {
  if (noRepeatingDigits(n)) {
    newArr.push(n);
  }
}

// или

const newArr = [];

for (let i = 0; i < arr.length; i++) {
  if (noRepeatingDigits(arr[i])) {
    newArr[newArr.length] = arr[i];
  }
}

// или

const newArr = (function xxx(arr, i = 0) {
  return i < arr.length
    ? (noRepeatingDigits(arr[i]) ? [ arr[i] ] : []).concat(xxx(arr, i + 1))
    : [];
})(arr);