0xD34F

Вариант добавить в лоб, как я сделал это выше class='test', не сработал.

брехня

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

Этот класс применился к input. А мне нужно применить класс к самому select, который появляется перед закрывающим тегом body.

Судя по документации, такой возможности не предусмотрено. При изучении исходного кода компонента был обнаружен недокументированный параметр mdClass, значение которого добавляется корневому элементу выпадающего списка в качестве класса.

Можете использовать его на свой страх и риск.

Также надо иметь в виду, что поскольку выпадающий список рендерится за пределами корневого элемента компонента, добавляемый css-класс должен быть описан в секции style, не являющейся scoped.

Вот окей, используем Set:

Array.from(new Set(arr.flat()))

// или, без создания промежуточного массива

[...arr.reduce((acc, n) => (n.forEach(m => acc.add(m)), acc), new Set)]

Вот не окей:

Object.keys([].concat(...arr).reduce((acc, n) => (acc[n] = 1, acc), {}))

// или

Array.prototype.concat.apply([], arr).filter((n, i, a) => i === a.indexOf(n))

// или

`${arr}`.split(',').reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])

// или

String(arr).match(/\w/g).sort().filter((n, i, a) => n !== a[i - 1])

// или

arr.toString().match(/(\w)(?!.*\1)/g) || []

Ну, во-первых - переменные всё-таки обновляются. Во-вторых - проблема тут не столько в использовании nextTick, сколько в том, как браузер оптимизирует отрисовку страницы. Если одно и то же css свойство обновляется несколько раз подряд, то отрисовано будет только последнее состояние. Чтобы добиться желаемого поведения, вам надо спровоцировать reflow между изменениями свойства - тут есть разные варианты. Например.

Вместо ненужных элементов ничего не указывайте:

function someFunction([ ,,, id,, status ]) {

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

function someFunction({ 3: id, 5: status }) {

web worker

Чем является this внутри обработчика клика? Не тем, что вам кажется. Замените $(this).attr("href") на $(event.target).attr("href") или стрелочную функцию на обычную.

Первым делом надо выдернуть из объекта msg.razd массив значений:

const arr = Object.values(msg.razd);.

Затем из вложенных массивов следует собрать один общий:

const categories = arr.flatMap(n => n.category);

// или

const categories = [].concat.apply([], arr.map(n => n.category));

// или

const categories = arr.reduce((acc, n) => (acc.push(...n.category), acc), []);

И, наконец, достать из полученного массива объекты с указанными id:

const result = categories.filter(n => expect.includes(n._id));

// или

const result = categories.filter(function(n) {
  return this.has(n._id);
}, new Set(expect));

// или

const categoriesObj = Object.fromEntries(categories.map(n => [ n._id, n ]));
const result = expect.reduce((acc, n) => ((n = categoriesObj[n]) && acc.push(n), acc), []);

$(document).on('click', '.qwe > a', function() {
  $(this).next('.op').addClass('actives');
});

$(document).on('click', '.cl', function() {
  $(this).closest('.op').removeClass('actives');
});

Или может есть вариант на CSS?

есть

Отсутствует key. Вы его вроде бы указали, но ведь реально никаких id в элементах массива items нет. Надо добавить.

Забыли передать current в setTimeout, должно быть так:

setTimeout((current) => pika[current].classList.toggle('active'), 100, current)

UPD. А вообще, не очень понятно, зачем этот setTimeout нужен. Можно просто вырезать его.

А зачем вы добавляете обработчики keydown в startGame? Десять раз сыграли - вот уже есть десять обработчиков, которые делают одно и то же. Достаточно и одного. Вынесите этот код за пределы startGame.

Добавьте в компонент свойство, которое будет ссылкой на кликнутое пользователем сообщение, и при открытии окна обновляйте его:

@click="openModal(message)"

data: () => ({
  openedMessage: {},
  ...
}),
methods: {
  openModal(message) {
    this.openedMessage = message;
    this.showMessageModal = true;
  },
  ...
},

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

<span class="box-title">{{ openedMessage.какоеТамУВасСвойствоОтвечаетЗаЭтотTitle }}</span>
...
<div class="box-body">{{ openedMessage.нуТутТожеВамВиднееЧтоНаписать }}</div>

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

{this.props.children}

Документацию всё-таки следует читать:

Vue cannot detect the following changes to an array <...> When you directly set an item with the index

Соответственно, вместо

this.terain[x][y] = Number(this.cursorBlock)

пусть будет

this.$set(this.terain[x], y, +this.cursorBlock);

// или

this.terain[x].splice(y, 1, this.cursorBlock | 0);

Изменять данные в вычисляемых свойствах не следует, но вы это делаете - поскольку метод reverse не создаёт новый массив, а меняет исходный. Так что прежде чем его использовать, массив следует скопировать:

return [...this.messagesforuser].reverse()

Элемент скопировали, а привязанные к нему обработчики событий - нет.

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

const $test = $('.test').on('click', '.testText', function() {
  $test.append($(this).clone());
});

Или клонируйте элемент вместе с его обработчиками событий:

$('.testText').click(function() {
  $('.test').append($(this).clone(true));
});

const index = items.findIndex(n => n._id === 3);
const result = items.slice(index * (index !== -1));

или

const result = items.reduce((acc, n) => (
  n._id === 3 && (acc = []),
  acc.push(n),
  acc
), []);

.bullet li.notForList:before {
  counter-increment: none;
  content: "";
}