0xD34F

const Image = ({ url }) => (
  <div>
    <img src={url} />
  </div>
);

class App extends React.Component {
  state = {
    items: [],
  }

  componentDidMount() {
    fetch('https://api.kai-zer.ru/dev/method/products.getAll')
      .then(r => r.json())
      .then(r => {
        this.setState({
          items: r.response.items,
        });
      });
  }

  render() {
    return (
      <div>
        {this.state.items.map(n => <Image {...n.image} />)}
      </div>
    );
  }
}

const blockSelector = '.block';
const buttonSelector = '[data-class]';
const activeClass = 'active';

const blocks = document.querySelectorAll(blockSelector);
const buttons = [...document.querySelectorAll(buttonSelector)];
const classes = buttons.map(n => n.dataset.class);

document.body.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    blocks.forEach(n => {
      n.classList.remove(...classes);
      n.classList.add(button.dataset.class);
    });

    buttons.forEach(n => n.classList.toggle(activeClass, n === button));
  }
});

$('ul').click(function(e) {
  e.stopPropagation();
  const $li = $(e.target).closest('li');
  if ($li.length) {
    $li.children('ul').toggle();
    $li.siblings().children('ul').hide();
  }
}).find('ul').hide();

https://jsfiddle.net/297m5euz/

Поиск работает только с первого раза. Потом, когда состояние должно вернуться после фильтрации, этого почему-то не происходит.

Да понятно почему - вы при поиске выкидываете объекты раз и навсегда, нечему возвращаться.

Передавайте исходный массив данных в props, и фильтруйте при поиске его:

class App extends React.Component {
  state = {
    people: this.props.people,
  };

  handeSearch = e => {
    const search = e.target.value.toLowerCase();

    this.setState((state, { people }) => ({
      people: people.filter(n => n.name.toLowerCase().includes(search)),
    }));
  }

  render() {
    return (
      <div className="contacts">
        <input
          type="text"
          className="search-field"
          onChange={this.handeSearch}
        />
        <ul className="contacts-list">
          {this.state.people.map(n => <Person key={n.id} {...n} />)}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <App people={Peoples} />,
  document.getElementById('root')
);

Полагаю,что вопрос банален.

Действительно. Так что вот вам вместо ответа ряд наводящих вопросов:

• Значение какого типа возвращает метод val?
  
• А сравниваете вы его со значениями какого типа?
  
• В чём разница между операторами == и ===?
  

$('.new-game') добавляется динамически на страницу

Вот вы сами на свой вопрос и ответили - нет никакого .new-game в тот момент, когда вы его пытаетесь получить.

Хотелось бы сделать универсальную функцию, чтобы можно было передавать в неё элемент...

Можно передавать селектор вместо элемента, в обработчике mousemove получать элемент, если его нет - ничего не делать, есть - ок, назначаем transform, или что там у вас. Типа так.

Гм-гм... Опять несколько корневых элементов сделали - не далее как месяц назад, вы уже сталкивались с подобной проблемой. Не надоело продолжать наступать на одни и те же грабли?

Так, теперь что делать.

1. Заголовок таблицы оборачиваете в thead
   
2. В draggable добавляете атрибут element="tbody"
   
3. Элемент tr из шаблона компонента table-operations выбрасываете, v-for будет по item-operation
   
4. В компоненте item-operation оборачиваете все td в один общий tr
   

Объект события доступен как $event, так что

<button @click="someFunction($event.target)">Click!</button>

Но вообще, если вы действительно собираетесь

повесить на него определенный класс

, то так делать не надо. О том, как правильно работать с классами, вы можете прочитать в документации.

Вместо body анимируйте .wrapper:

$('.vertical').on('click', 'a', function(e) {
  e.preventDefault();

  const id = $(this).attr('href');
  const $wrapper = $('.wrapper');
  const offset = $(id).offset().top;
  const scrollTop = offset + $wrapper.scrollTop();
  $wrapper.animate({ scrollTop }, 1500);
});

Теперь вопрос в другом. Как правильно поступать. Если объекты и массивы передаются по ссылке? делать еще одну операцию по копированию?

Да. Вместо

let puzzles = getters.getPuzzles

делайте

let puzzles = [...getters.getPuzzles]

Через масив slides(условно) их не выведешь т.к контент у них различаеться...

Да ну? А что мешает сделать контент свойством элементов slides и передавать каждому слайду то, что нужно?

const div = document.createElement('div');
div.innerHTML = str;
const arr = Array.from(div.children, n => n.innerText);

или

const arr = Array.prototype.map.call(
  new DOMParser().parseFromString(str, 'text/html').body.children,
  n => n.textContent
);

или

const arr = [];
for (const n of document.createRange().createContextualFragment(str).children) {
  arr.push(n.innerHTML);
}

Где и на сколько надо ограничить длину текстового содержимого:

const selector = '.text_size';
const maxlen = 3;

Параметром метода text может быть не только строка, но и функция, которая вызывается для каждого элемента набора, принимает текущее текстовое содержимое элемента и возвращает новое:

$(selector).text((i, text) => {
  return text.length > maxlen ? text.slice(0, maxlen) + '...' : text;
});

А вообще, можно и отказаться от jquery:

const reg = RegExp(`(.{${maxlen}}).+`);

for (const n of document.querySelectorAll(selector)) {
  n.textContent = n.textContent.replace(reg, '$1...');
}

<div>
  <img>
</div>

div {
  background: red;
  display: inline-block;
}
img {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

https://jsfiddle.net/xsyorh92/

Метод setLatLng, типа так.

https://css-tricks.com/multi-line-padded-text/

<input id="lower" type="number" value="100">
<input id="upper" type="number" value="200">

const lower = document.querySelector('#lower');
const upper = document.querySelector('#upper');

lower.addEventListener('input', function() {
  this.value = Math.min(this.value, upper.value);
});

upper.addEventListener('input', function() {
  this.value = Math.max(this.value, lower.value);
});

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

Можно сделать проверку после нажатия enter?

updateValueOnEnter(lower, val => Math.min(val, upper.value));
updateValueOnEnter(upper, val => Math.max(val, lower.value));

function updateValueOnEnter(input, f) {
  input.addEventListener('keypress', ({ key, target: t }) => {
    if (key === 'Enter') {
      t.value = f(t.value);
    }
  });
}

А что такое this.rooms - массив, объект, есть ли у него вложенные объекты? Раз уж решили не показывать, что это такое...

Можно вместо this.rooms попробовать присваивать JSON.parse(JSON.stringify(this.rooms)) (правда, если внутри есть методы, они отвалятся).

Или можно воспользоваться _.cloneDeep или каким-нибудь аналогом, или реализовать его самостоятельно.

Или можно добавить в компонент метод, который будет возвращать дефолтное значение rooms (т.е., создавать новый объект при каждом вызове), и, когда понадобится ещё один экземпляр rooms, вместо обращения к this.rooms использовать этот метод:

methods: {
  createRooms() {
    return {
      ...
    };
  },
  ...

this.period[moment(itr.next().toDate()).format('YYYY-MM-DD')] = this.createRooms();

например

в shouldComponentUpdate nextState.items почему-то равно всегда this.state.items

Разумеется - вы же не создаёте новый массив.

Замените

let items = this.state.items;
items.push( undefined );

на

let items = [ ...this.state.items, undefined ]