0xD34F

Сделать объект с транслитерированными символами:

const letters = {
  'а': 'a',
  'б': 'b',
  'в': 'v',
  ...
};

В стейте хранить оригинальное и транслитерированное значения:

state = {
  value: '',
  translitValue: '',
}

При изменении содержимого инпута с оригинальным значением обновлять оба:

onChange = ({ target: { value } }) => {
  this.setState({
    value,
    translitValue: value.toLowerCase().split('').map(n => letters[n] || n).join(''),
  });
}

<input value={this.state.value} onChange={this.onChange} />
<input value={this.state.translitValue} readOnly />

https://jsfiddle.net/oeL4u68t/

data: () => ({
  filters: [ 'ArmorProtective_LowerBody', 'ArmorProtective_Head' ],
  activeFilter: null,
  ...


computed: {
  filteredHeads() {
    const f = this.activeFilter;
    return f
      ? this.heads.flatMap(n => n[f]).filter(Boolean)
      : [];
  },
  ...

<a v-for="f in filters" @click="activeFilter = f">{{ f }}</a>
...


<div v-for="head in filteredHeads">
  ...

Данные вкладок кладём в массив:

const items = [
  { title: 'London', content: 'London is the capital city of England.' },
  { title: 'Paris', content: 'Paris is the capital of France.' },
  { title: 'Tokyo', content: 'Tokyo is the capital of Japan.' },
];

Делаем компонент, отображающий вкладку. Тут ничего сложного - просто выводятся переданные данные:

const TabContent = ({ title, content }) => (
  <div className="tabcontent">
    <h3>{title}</h3>
    <p>{content}</p> 
  </div>
);

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

function Tabs({ items }) {
  const [ active, setActive ] = React.useState(null);

  const openTab = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="tab">
        {items.map((n, i) => (
          <button
            className={`tablinks ${i === active ? 'active' : ''}`}
            onClick={openTab}
            data-index={i}
          >{n.title}</button>
        ))}
      </div>
      {items[active] && <TabContent {...items[active]} />}
    </div>
  );
}

https://jsfiddle.net/0dhaojze/

Убрать emit из дочернего компонента, v-on из родительского. Параметр list - заменить статическую передачу значения на динамическую: :list="{{ json_encode($tasks) }}". Так переданное значение будет рассматриваться не как строка, а в качестве javascript выражения - применять JSON.parse не нужно.

https://jsfiddle.net/cjf14ek3/

const str = arr
  .map(n => `${n.charAt(0).toUpperCase()}${n.slice(1)}`)
  .join(', ');

// или

const str = arr.reduce((acc, n, i) => {
  return acc + (i ? ', ' : '') + n.replace(/./, m => m.toUpperCase());
}, '');

// или

const str = ''.concat(...arr.flatMap(([ c = '', ...n ], i) => {
  return [ i ? ', ' : '', c.toUpperCase(), ...n ];
}));

+str.replace(/.+img-(?=\d)|\D+$/g, '')

или

str.match(/(?<=img-)\d+/) | 0

или

parseInt(str.split('/img-').pop())

есть массив индексов [0, 3, 1, empty, 2]
<...>
должно быть - [100, 400, 200, empty, 300]

Что, вот прям так - empty? Ну, держите:

for (let i = 0; i < indexes.length; i++) {
  if (indexes.hasOwnProperty(i)) {
    arr.push(arr[indexes[i]]);
  } else {
    arr.length++;
  }
}
arr.splice(0, arr.length - indexes.length);

Если отказаться от этого идиотизма с empty (пусть в массиве индексов будет что-то не числовое, null например; а в исходный массив подставляться будет undefiend, соответственно), то

arr.splice(0, arr.length, ...indexes.map(i => arr[i]));

Убрать stacking из plotOptions.column. Добавить (туда же) grouping: false.

Заменяем ol на transition-group:

<transition-group tag="ol" name="todo">
  <li
    v-for="(todo, i) in todos"
    :key="todo.id"
    @click="todos.splice(i, 1)"
  >{{ todo.text }}</li>
</transition-group>

И добавляем стили:

li {
  transition: all 0.7s;
}

.todo-leave-active {
  position: absolute;
}

.todo-leave-to {
  transform: translateX(500px);
  opacity: 0;
}

https://jsfiddle.net/8j5ygb7n/

Не нужно здесь никаких вычисляемых свойств, можно использовать для назначения класса name и password:

:class="{ 'authorization__label--done': name }"

:class="{ 'authorization__label--done': password }"

https://codepen.io/anon/pen/PryVPj?editors=1010

UPD. https://jsfiddle.net/y2aL36rp/

О каком классе идёт речь: const className = 'carusel__item_active';.

Как проверить, что элемент имеет класс:

const hasClass = el => el.classList.contains(className);
// или
const hasClass = el => el.matches(`.${className}`);
// или
const hasClass = el => el.className.split(' ').includes(className);
// или
const hasClass = el => RegExp(`(^| )${className}( |$)`).test(el.classList.value);

Получаем элемент:

const activeSlide = Array.prototype.find.call(items, hasClass);

// или

let activeSlide = null;
for (const n of items) {
  if (hasClass(n)) {
    activeSlide = n;
    break;
  }
}

// или

const [ activeSlide ] = [...items].filter(hasClass);

// или

let activeSlide = null;
for (let i = 0; i < items.length && !activeSlide; i++) {
  activeSlide = hasClass(items[i]) ? items[i] : activeSlide;
}

// или

let activeSlide = items[0];
while (activeSlide && !hasClass(activeSlide)) {
  activeSlide = activeSlide.nextElementSibling;
}

// или

const activeSlide = (function get(i, n = items.item(i)) {
  return (!n || hasClass(n)) ? n : get(-~i);
})(0);

function onMarkerClick(e) {
  map.setZoom(8);
  map.panTo(e.latLng);
}


for (const f of features) {
  const marker = new google.maps.Marker({
    position: f.position,
    icon: icons[f.type].icon,
    map,
  });
  marker.addListener('click', onMarkerClick);
}

this.setState({

Даже думать не хочу, возможна ли такая ситуация, когда сразу после вызова setState для результата одного запроса начинает обрабатываться другой. Не будем рисковать потерей результатов и используем функциональное обновление. Ну и если хотите последовательные запросы, тогда надо ждать конца предыдущего, чтобы сделать следующий, async/await позволит код упростить.

async componentDidMount() {
  for (const url of urlList) {
    const
      dataAPI = [ ...this.state.dataAPI, await servicesAPI.getResourse(url) ],
      loaded = dataAPI.length === urlList.length;

    await new Promise(r => this.setState({ dataAPI, loaded }, r));
  }
}

const input = document.querySelector('input');
const buttons = document.querySelectorAll('button');
buttons.forEach(n => n.addEventListener('click', onClick));

Можно сложить в массив информацию о том, какой класс какому id соответствует:

const classes = [
  [ 'id1', 'class1' ],
  [ 'id2', 'class2' ],
  [ 'id3', 'class3' ],
];

function onClick() {
  classes.forEach(n => input.classList.toggle(n[1], n[0] === this.id));
}

Или добавить кнопкам атрибут, который будет содержать имя класса (id кнопкам в этом случае уже не нужны):

<button data-class="class1">click me</button>
<button data-class="class2">click me</button>
<button data-class="class3">click me</button>

function onClick() {
  buttons.forEach(n => input.classList.toggle(n.dataset.class, n === this));
}

jsfiddle.net/54hpusg2

const count = (max, timeout) =>
  (function next(i) {
    if (i <= max) {
      setTimeout(() => {
        console.log(i);
        next(++i);
      }, timeout(i));
    }
  })(0);


count(100, i => i * 5);