0xD34F

array_column(array_filter($list, function($n) {
  return $n['isAllowed'];
}), 'id')

ракета пролетела всю длину экрана и вышла за пределы экрана(тут мой скрипт при помощи splice удаляет ракету из массива ракет)

Не удаляет. Нет у вас там кода, который такое делает. Есть код отвечающий за перемещение - с проверкой достижения границы экрана, и никакой ветки else, в которой и должно происходить удаление, там нет. Есть удаление ракеты при столкновении с кораблём. Удаления при выходе за границы экрана нет. Нет его. НЕ-ТУ.

А уж splice внутри forEach - за такое не грех и руки оборвать.

Проверяем, не вышла ли ракета за границы элемента (левую сравниваем с горизонтальной координатой, правую с суммой горизонтальной координаты и ширины), если да - удаляем, нет - двигаем:

this.rockets.length -= this.rockets.reduce((acc, n, i, a) => {
  a[i - acc] = n;

  if (n.type === 'right' && this._isCollideFlyLeft(n)) {
    this.flyLeft.energy -= 10;
  } else if (n.type === 'left' && this._isCollideFlyRight(n)) {
    this.flyRight.energy -= 10;
  } else if (0 < n.xCoord && n.xCoord + n.width < this.fieldEl.offsetWidth) {
    n.move();
    return acc;
  }

  return acc + 1;
}, 0);

Делаете метод фильтрации опций, который в качестве аргумента принимает индекс текущего селекта:

filterItems(index) {
  return this.items.filter(n => [ -1, index ].includes(this.selected.indexOf(n)));
}

И передаёте в v-for отфильтрованные опции. Типа так.

Метод onButton и свойство button не нужны - достаточно computed свойства showButton, типа так:

<button v-show="showButton">

computed: {
  showButton() {
    return this.username !== '' && this.password !== '';
  },
},

updatePost(title: string, url: string, id:number): void {
    const update: Picture[] = this.collection.map((p)=>{
        p.id  = id;
        p.title = title;
        p.url = url
    });
}

Если цель - обновление элементов массива, надо использовать forEach вместо map, и нет необходимости в получении результата. И зачем вы обновляете весь массив, если по вашим же словам обновить нужно всего один элемент? Или вы не понимаете, что происходит в этом коде?

Надо по id найти нужный элемент и обновить только его:

Object.assign(this.collection.find(n => n.id === id), { title, url });

UPD. Ещё странный момент. Если верить вашему коду, то свойство edData является массивом:

editPost(picId: Picture[]): void {
    this.edData = picId;
}

А если смотреть на шаблон - предполагается, что это объект:

<button (click)="updatePost(titleEd.value, urlEd.value, edData.id);

Откуда у edData возьмётся id, если это массив?

Работает, если в вместо this.$refs.form.submit() написать setTimeout(()=>this.$refs.form.submit(), 0) . Но как будет правильнее в этом случае.

nextTick

И почему вообще так происходит?

потому что

Вместо :model="MainForm" должно быть :model="MainForm.dynamicValidateForm".

А :rules="rules" замените на :rules="rules.value".

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

а могу я сослаться :model="MainForm" в главной форме, а в props передать dynamicValidateForm

Нет проблем:

:prop="`dynamicValidateForm.domains.${index}.value`"

Два свойства - вводимое пользователем значение и состояние (активность ввода). В зависимости от состояния отображается input или span (v-if / v-else). Как-то так:

<input v-if="input" v-model="name" @keypress.enter="onEnter">
<span v-else v-text="name" @click="onClick"></span>

data: () => ({
  name: '',
  input: true,
}),
methods: {
  onEnter() {
    if (this.name) {
      this.input = false;
    }
  },
  onClick() {
    this.input = true;
  },
},

const extend = (target, source) => Object
  .entries(source instanceof Object ? source : {})
  .reduce((acc, [ k, v ]) => {
    acc[k] = v instanceof Object ? extend(acc[k], v) : k in acc ? acc[k] : v;
    return acc;
  }, target instanceof Object ? target : {});


extend(patient, donor);

Вешаете обработчик клика на smth-tag, передаёте в него id выбранного элемента, и группу к которой элемент принадлежит, устанавливаете selectedTagId. Всё.

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

А как это сделать из компонента, а не из корневого экземпляра VUE?

Никак, это абсурд. То есть, можно конечно из дочернего компонента постучаться в $root / $parent и что-то там поменять, но делать такого НЕ НАДО. Данные лежат в корневом компоненте - вот там их и меняйте.

Или вы имели в виду отправку события из дочернего компонента? Пробросить событие через smth-group не выйдет, т.к. слотам нельзя назначать обработчики событий. Остаётся вариант с шиной событий (ну и vuex ещё), но в общем случае - сделать всё равно не получится, так как smth-tag не знает к какой группе принадлежат его данные (однако, если гарантируется, что id уникальны не только в пределах группы, а вообще - тогда можно, например так).

Наверное нужно создать массив, куда помещать id продукта и данные с инпутов...

Не нужно. Указывайте в v-model соответствующие свойства объекта product:

<input v-model="product.count" name="count" type="text" placeholder="Количество">
<input v-model="product.comment" name="comment" type="text" placeholder="Примечание">

А вот непосредственно перед выполнением запроса - да, можно и отдельный массив сделать, обходите products и достаёте из него нужные данные.

Вы добавляете элементы в начало массива, а новый id вычисляете на основе последнего элемента. Очевидно же - сколько бы элементов вы ни добавили таким образом, id последнего не изменится, а значит и новые id будут одинаковыми. На вашем месте, вместо того, чтобы плясать от какого-то конкретного элемента, я бы искал максимальный id:

const id = Math.max(0, ...this.collection.map(n => n.id)) + 1;

Объявление свойства birthDay, тип и значение - должно быть Date вместо Data. И и при использовании пайпа аналогично - должно быть date вместо data. И формат даты - это же строка, где кавычки? Исправляем:

birthDay: Date = new Date();

{{ birthDay | date : 'dd-MM-yyyy' }}

const onInput = () => $button.prop('disabled', !$inputs.get().every(n => $(n).val()));
const $button = $('селектор кнопки');
const $inputs = $('селектор инпутов').on('input', onInput);
onInput();

или

const button = document.querySelector('селектор кнопки');
const inputs = [...document.querySelectorAll('селектор инпутов')];
const onInput = () => button.disabled = inputs.some(n => !n.value);
inputs.forEach(n => n.addEventListener('input', onInput));
onInput();

$('#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()}`);