0xD34F

О какие элементах и атрибутах идёт речь:

const elements = document.querySelectorAll('p');
const attrNamePrefix = 'bind:';

Как из общего набора элементов отобрать нужные:

const result = Array.prototype.filter.call(
  elements,
  n => Array.prototype.some.call(
    n.attributes,
    m => m.name.startsWith(attrNamePrefix)
  )
);

или

const result = [];

for (const n of elements) {
  for (const m of n.attributes) {
    if (m.name.indexOf(attrNamePrefix) === 0) {
      result.push(n);
      break;
    }
  }
}

Во-первых - ошиблись с именем класса (это вы могли бы и сами обнаружить).

Во-вторых - браузер стремится оптимизировать внесение изменений в DOM-дерево, так что свежесозданные элементы анимироваться не будут. Чтобы анимация выполнилась, нужен дополнительный reflow, для чего можно либо обернуть добавление класса в setTimeout, либо перед добавлением класса обратиться к одному из свойств, расчёт которых вызывает reflow. Как-то так.

<div class="counter">
  <span class="counter__visible"></span> /
  <span class="counter__total"></span>
</div>

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

  const $items = $('.item');

  $items.filter(':hidden').slice(0, 4).fadeIn();

  const visible = $items.filter(':visible').length;

  $('.counter__visible').text(visible);
  $('.counter__total').text($items.length);

  if ($items.length === visible) {
    $(this).fadeOut('slow');
  }
}).click();

Заменяем switch на таблицу, где будут перечислены все возможные варианты (в данном случае достаточно простого объекта), после этого вся логика выбора нужного значения сведётся к чтению свойства:

const defineQuestionDataByLanguage = (question, lang) => {
  const answerLang = ({
    2: 'swe',
    // ещё какие-то языки, если надо
  })[lang] || 'en';

  return {
    labelLang: question[answerLang],
    answerLang,
  };
};

После этого табличку с языками можно отделить от функции (вынести в отдельный файл, какой-нибудь languages.json, например), и тогда станет совсем здорово:

const defineQuestionDataByLanguage = (question, lang) => {
  const answerLang = languages[lang] || languages.default;

  return {
    labelLang: question[answerLang],
    answerLang,
  };
};

А ещё при необходимости внести изменения в список языков трогать код будет не надо.

Где находятся элементы, что это за элементы, по каким событиям надо получать их текст и что с текстом надо делать:

const containerSelector = 'table';
const itemSelector = 'td';
const events = [ 'click', 'contextmenu' ];
const onText = text => console.log(text);

Получаем, делаем:

$(containerSelector).on(events.join(' '), itemSelector, function() {
  onText($(this).text());
  return false;
});

или

const container = document.querySelector(containerSelector);
const handler = e => (e.preventDefault(), onText(e.target.closest(itemSelector).textContent));

events.forEach(n => container.addEventListener(n, handler));

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

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

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

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

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

for (let i = this.rockets.length; i--; ) {
  const rocket = this.rockets[i];

  if (rocket.type === 'right' && this._isCollideFlyLeft(rocket)) {
    this.flyLeft.energy -= 10;
    this.rockets.splice(i, 1);
  } else if (rocket.type === 'left' && this._isCollideFlyRight(rocket)) {
    this.flyRight.energy -= 10;
    this.rockets.splice(i, 1);
  } else if (
    rocket.xCoord + rocket.width >= this.fieldEl.offsetWidth ||
    rocket.xCoord <= 0
  ) {
    this.rockets.splice(i, 1);
  } else {
    rocket.move();
  }
}

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

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();