0xD34F

Очевидно, превращать строку в число явным образом: Int(stringValue). Правда, вам это не сильно поможет - есть ещё косяки. Можете попытаться исправить их самостоятельно.

function([ name, surname, department, position, salary ]) {

При изменении значения селекта надо отправлять новое значение родителю.

Добавьте select'у @input="$emit('input', $event.target.value)", или сделайте вычисляемое свойство:

innerValue: {
  get() {
    return this.value;
  },
  set(val) {
    this.$emit('input', val);
  },
},

<select v-model="innerValue">

const getMaxIndexes = (arr, count) => Object
  .entries(arr.reduce((acc, n, i) => ((acc[n] = acc[n] ?? []).push(i), acc), {}))
  .sort((a, b) => b[0] - a[0])
  .flatMap(n => n[1])
  .slice(0, count);

preg_replace('~ \(.*$~', '', $str)

или

explode(' (', $str)[0]

Добавляете картинку в ползунок:

$slider.find('.ul-slider-handle').html(`<img src="${imageSrc}">`);

При изменении позиции ползунка обновляете интересующее вас css-свойство:

slide(e, ui) {
  $(this).find('.ui-slider-handle img').css('opacity', в зависимости от ui.value);
},

https://jsfiddle.net/4a1xnp0e/1/

Не вижу причин, по которым цвета должны быть классами. Замените на data-атрибуты:

<div data-color="black"></div>
<div data-color="white"></div>

document.addEventListener('click', ({ target: { dataset: { color } } }) => {
  if (color) {
    document.querySelector('button').dataset.id = color;
  }
});

// или

const button = document.querySelector('button');
const onClick = e => button.setAttribute('data-id', e.target.getAttribute('data-color'));
document.querySelectorAll('[data-color]').forEach(n => n.addEventListener('click', onClick));

.container {
  background: #224B7A;
}

.container.active {
  background: #fff;
}

state = {
  active: false,
}

toggleActive = ({ type }) => {
  this.setState(() => ({
    active: type === 'focus',
  }));
}

<div className={`container ${this.state.active ? 'active' : ''}`}>
  ...
  <input onFocus={this.toggleActive} onBlur={this.toggleActive} />

Запрос данных асинхронен, так что рендеринг с lists равным null будет выполнен в любом случае. И вот там, где вы пытаетесь lists перебирать, проверяйте, что он не null - тогда вызывать map можно. Или устанавливайте в качестве дефолтного значения вместо null пустой массив.

Вырезаете обработчики mouseover и mouseout, динамическое назначение классов, свойство isShipHovered и метод chooseShipOnBoard.

Заменяете .hover на .square:hover - всё, больше ничего не надо. Если есть возможность что-то сделать только через css - делайте это что-то только через css.

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

мне нужно было использовать именно через script, потому,что я потом буду манипулировать этим методом chhoseShipOnBoard, например ещё добавлять классы к соседним блокам, чтобы при наведении выделялся не только текущий блок, но и несколько рядом находящихся блоков

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

data: () => ({
  hovered: null,
  ...
}),
methods: {
  getClasses(index) {
    return что-то, в зависимости от index и this.hovered;
  },
},

<span
  v-for="(n, i) in squares"
  @mouseover="hovered = i"
  @mouseout="hovered = null"
  :class="getClasses(i)"
>

https://jsfiddle.net/arw16jtf/

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

Я так понимаю надо какой-то фильтр применить для отображения?

Можно и фильтр:

filters: {
  numberOnly: val => /^\d+$/.test(val) ? val : '',
},

<div v-for="n in squares">
  {{ n | numberOnly }}
</div>

Но не обязательно:

<div v-for="n in squares">
  {{ Number.isNaN(+n) ? '' : n }}
</div>

Если знаете, в каких местах находятся нужные элементы, то

<div v-for="(n, i) in squares">
  {{ i % 11 ? '' : n }}
</div>

Или, если знаете сами элементы:

data: () => ({
  itemsToShow: [...Array(10)].map((n, i) => `${i + 1}`),
  ...
}),

<div v-for="n in squares">
  {{ itemsToShow.includes(n) ? n : '' }}
</div>

str.replace(/(?<!^)\+|[^\d+]/g, '')

$('.btn-show').on('click', function() {
  $(this).toggleClass('.flip');
});

Во-первых, строка, передаваемая в метод toggleClass, должна содержать имя класса, а вовсе не соответствующий селектор. Так что просто 'flip', без точки.

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

Никак.

Делайте async функцию, где будет цикл, в теле которого await fetch:

async function xxx(arr) {
  const result = [];

  for (const item of arr) {
    result.push(await fetch(...));
  }

  return result;
}

li:nth-child(5n + 2),
li:nth-child(5n + 3) {
  color: red;
}

Используйте компонент VictoryAxis и стилизуйте его:

<VictoryChart>
  <VictoryAxis
    style={{
      axis: {
        stroke: 'здесь ваш цвет',
      },
    }}
  />
</VictoryChart>

const arr = Array.from({ length: max - min + 1 }, (n, i) => i + min);

или

function* range(start, stop, step) {
  if (stop === undefined) {
    stop = start;
    start = 0;
  }

  if (start === stop) {
    step = 1;
  }

  if (step === undefined) {
    step = Math.sign(stop - start);
  }

  if (start <= stop && step > 0 || start >= stop && step < 0) {
    for (let i = start; step < 0 ? i >= stop : i <= stop; i += step) {
      yield i;
    }
  }
}


console.log(Array.from(range(3, 9))); // [3, 4, 5, 6, 7, 8, 9]

console.log([...range(-5)]); // [0, -1, -2, -3, -4, -5]

for (const n of range(100, 200, 33)) {
  console.log(n); // 100  133  166  199
}

const r = range(12, -7, -5);
for (let n; !(n = r.next()).done;) {
  console.log(n.value); // 12  7  2  -3
}

Потому что при передаче списка в качестве параметра копируется не он сам, а ссылка на него. При рекурсивном вызове вместо mass передавайте mass.copy().

[ ' '.join(n) for n in zip(list1, list2) ]