0xD34F

$('#name').on('input', function() {
  $('.cell').text(i => this.value[i] || '');
});

или

document.querySelector('#name').addEventListener('input', e => {
  document.querySelectorAll('.cell').forEach((n, i) => {
    n.textContent = e.target.value.charAt(i);
  });
});

arr.map(n => ({
  id: n.id.value,
  title: n.title.value,
  slug: n.slug.value
}))

или

arr.map(n => Object.entries(n).reduce((acc, [ k, v ]) => (acc[k] = v.value, acc), {}))

или

arr.map(n => Object.keys(n).reduce((acc, k) => ({ ...acc, [k]: n[k].value }), {}))

или

arr.map(n => Object.assign({}, ...Object.values(n).map(m => ({ [m.title.toLowerCase()]: m.value }))))

href должен быть разным

Определяем класс, который будет сдвигать .wrap:

.wrap-active {
  transform: translateY(-100%);
}

Переключаем этот класс при кликах по ссылкам:

$('.wrap').on('click', 'a', function(e) {
  e.preventDefault();
  $(e.delegateTarget).toggleClass('wrap-active');
});

https://jsfiddle.net/uvoqfn82/

Или, без js.

Перед .wrap добавляем скрытый чекбокс:

<input type="checkbox" id="toggle" hidden>

Ссылки заменяем на label'ы, переключающие чекбокс:

<a href="#">Day</a> ---> <label for="toggle">Day</label>

<a href="#">Night</a> ---> <label for="toggle">Night</label>

Сдвигаем .wrap не при наличии дополнительного класса, а если чекбокс перед ним выставлен:

.wrap-active { ---> #toggle:checked + .wrap {

https://jsfiddle.net/uvoqfn82/1/

замените

$("td.price").text()

на

$(this).closest('tr').find('td.price').text()

UPD. А вообще, давайте-ка перепишем и дополним ваш код. Вот, обновляются суммы не только в строках с input'ами, но и "итого" и "общая" тоже:

const sum = $items => $items.get().reduce((acc, n) => acc + +$(n).text(), 0);

function update($el, change) {
  const $tr = $el.closest('tr');
  const $count = $tr.find('.quantity-field').val((i, val) => Math.max(1, (val | 0) + change));

  $tr.find('.sum').text($count.val() * $tr.find('.price').text());

  $tr.nextAll('.total-tr').first().find('span').text(sum($tr
    .add($tr.prevUntil('.total-tr'))
    .add($tr.nextUntil('.total-tr'))
    .find('.sum')
  ));

  $table.find('.total-summ span').text(sum($table.find('.total-tr span')));
}

const $table = $('table')
  .on('click', '.button-plus, .button-minus', function() {
    const $btn = $(this);
    update($btn, +$btn.hasClass('button-plus') || -$btn.hasClass('button-minus'));
  })
  .on('input', '.quantity-field', function() {
    update($(this), 0);
  });

$table.find('.quantity-field').trigger('input');

или, без jquery

const sum = items =>
  Array.prototype.reduce.call(items, (acc, n) => acc + +n.textContent, 0);

function update(el, change) {
  let tr = el.closest('tr');
  const count = tr.querySelector('.quantity-field');
  count.value = Math.max(1, (count.value | 0) + change);

  tr.querySelector('.sum').innerText = count.value * tr.querySelector('.price').innerText;

  const rows = [];
  let total = tr;
  for (; !(total = total.nextElementSibling).matches('.total-tr'); rows.push(total)) ;
  for (; tr && !tr.matches('.total-tr'); rows.push(tr), tr = tr.previousElementSibling) ;

  total.querySelector('span').innerText = sum(Array.from(rows, n => n.querySelector('.sum')));
  table.querySelector('.total-summ span').innerText = sum(table.querySelectorAll('.total-tr span'));
}

const table = document.querySelector('table');

table.addEventListener('input', e => update(e.target, 0));
table.addEventListener('click', ({ target: t }) => {
  const change = +t.matches('.button-plus') || -t.matches('.button-minus');
  if (change) {
    update(t, change);
  }
});

table.querySelectorAll('.quantity-field').forEach(n => {
  n.dispatchEvent(new Event('input', { bubbles: true }));
});

const links = [
  'https://youtu.be/fi5LDM9ppuc',
  'https://www.youtube.com/embed/fi5LDM9ppuc',
];

const newLinks = links.map(n => `https://www.youtube.com/watch?v=${n.split('/').pop()}`);

Можно сделать метод, который преобразует объект так, чтобы вложенности не было:

methods: {
  plainObj(obj) {
    return Object.entries(obj).reduce((acc, [ k, v ]) => {
      if (v instanceof Object) {
        Object.assign(acc, this.plainObj(v));
      } else {
        acc[k] = v;
      }
      return acc;
    }, {});
  }
}

<li v-for="value in plainObj(object)" class="list-group-item">{{ value }}</li>

Или сделать рекурсивный компонент:

Vue.component('list-obj', {
  template: `
<ul class="list-group">
  <li v-for="value in obj" class="list-group-item">
    <list-obj v-if="value instanceof Object" :obj="value"></list-obj>
    <span v-else>{{ value }}</span>
  </li>
</ul>`,
  props: [ 'obj' ]
});

<list-obj :obj="object"></list-obj>

interface DataI {
  items: { [key: string]: ItemI }
}

Подробнее - index signature.

Добавить объектам, на основе которых создаются блоки, свойство, которое будет отвечать за наличие класса:

state: {
  items: [
    { title: '...', liked: false },
    { title: '...', liked: false },
    ...

Сделать мутацию, которая будет переключать значение этого свойства:

mutations: {
  toggleLike: (state, item) => item.liked = !item.liked,
  ...

Назначать класс в зависимости от значения этого свойства, и вызывать мутацию по клику:

<li
  v-for="n in $store.state.items"
  :class="{ liked: n.liked }"
  @click="$store.commit('toggleLike', n)"
  ...

Потому что к этим слайдам не привязано никаких обработчиков. А не привязано потому, что это копии слайдов - slick делает копии для создания иллюзии круговой прокрутки.

const date = new Date();
date.setMonth(date.getMonth() + 1);
date.setDate(0);

$('#datepicker').datepicker({
  maxDate: date,
});

Почему удаление элемента осуществляется в дочернем компоненте, который ни про какую collection знать не знает? Почему в родительском компоненте в качестве обработчика события указывается несуществующий метод?

Наверное, метод removePost из дочернего компонента надо разделить на два: removePost в дочернем компоненте эмитит id элемента, а removePost в родительском компоненте по этому id осуществляет удаление элемента из массива. Т.е., в дочернем:

removePost(picId: number) {
  this.remove.emit(picId);
}

В родительском:

removePost(picId: number) {
  this.collection = this.collection.filter(p => p.id !== picId);
}

arr.filter(n => n.items.length || n.show)

Косяк ровно тот же, что и в вашем предыдущем вопросе. Сделайте вместо индекса нормальный key - и всё станет хорошо. А сейчас что - элемент удалили, неважно какой, всегда изменяется key последнего элемента (вернее сказать, элемента с таким key вообще больше нет) - поэтому он и анимируется.

Потому что key кривой - завязан на индекс. Сделайте, чтобы он соответствовал реальным данным - всё будет OK.

MarkerClusterer вам в помощь.

UPD. https://codesandbox.io/s/for-httpsqnahabrcomq56380...

Странному коду - странное поведение. Разбираться в причинах которого как-то не очень интересно. Ну не должен getCountrys быть вычисляемым свойством, не должен. Это метод, или, возможно, watcher. Переписывайте код.

RegExp('(?:^|\s)([' + arg + '][.]*)','gi');

Косяк - при использовании конструктора RegExp надо экранировать обратный слеш.
Непонятное - зачем флаг g, выделение первых букв в отдельную группу и точки, которых может вообще не быть? Вы же вроде фильтрацию делаете.

Исправляем: RegExp(`(?:^|\\s)[${arg}]`, 'i').

this.filter = expr;

Раз у вас там таблица, то, надо полагать, свойство filter передаётся этой таблице в качестве значения одноимённого параметра. Почему обычное свойство? Может, стоит сделать его вычисляемым?

Способ на мой взгляд довольно костыльный, но... массив, который вы обходите через v-for - добавить его элементам свойство height, и передавать сами элементы в Tween. Как-то так.

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