Сергей Соколов

Vuex – светофор на перекрёстке. Вносит порядок ценой ограничений.
В деревне можно и без него. В большом городе – никак.

Мухи отдельно, котлеты отдельно. Тут данные, тут их отображение, а тут мы меняем данные.
Глобальную переменную откуда-то вдруг изменили, но никто не отреагировал.

Сделайте computed свойство emailObjects
которое получается из исходного массива emails примерно так:

emailObjects() {
  return this.emails.map(email => ({
    email,
    isActive: email.includes(this.search),
  });
},

т.е. тут вместо массива просто-email'ов делается массив объектов, где и email и свойство isActive, которое для данного адреса означает, включает он искомое или нет.

Наверное, есть более разумные решения, но попробуйте использовать динамические компоненты Vue.

Строку разбить на узлы: текстовые и компоненты. Сделать какой-то минимальный компонент для просто-текстовых кусков.

Например, из строки 'lorem ipsum dolor [placeholder|1] sit amet [placeholder|2]'
сделать массив

[
  ['text', 'lorem ipsum dolor'],
  ['copy', 1],
  ['text', 'sit amet'],
  ['copy', 2],
]

если я правильно понял, что каждый из плейсхолдеров копирует значение после вертикальной черты – первый копирует 1, второй 2.

В темплейте перебрать этот массив примерно так

<template v-for="item in items">
  <component :is="text" v-if="item[0] === 'text'">{ item[1] }</component>
  <component :is="copy" v-if="item[0] === 'copy'" :value="item[1]" />
</template>

Дочерний эмитит событие: this.$emit('paginate',page);
но родительский его не слушает и не обрабатывает.

См. https://vuejs.org/guide/components/events.html

В родительском надо что-то типа:

- <BasePagination v-model="page" :count="countProducts"  :car="car"></BasePagination>
+ <BasePagination @paginate="paginate" :count="countProducts"  :car="car"></BasePagination>

и добавить метод обработчик сего:

methods: {
  paginate(page) {
    this.page = page;
  },
},

Таски "active" и "ready", вероятно, ничем не отличаются по структуре. Поэтому можно их отдавать с бэка единой кучкой. Добавить каждому флаг isDone (true / false).

Раскидать их по панелям дашборда можно уже на фронте.

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

Как реализовать это во Vue — решать вам. Можно прикрутить Vuex и разобраться с глобальным стейтом и мутациями. Можно просто держать массив всех тасков в общем корневом компоненте, в нём же фильтровать активные / готовые и раздавать в дочерние через пропсы. Как из дочерних менять состояние родителей — распространённый вопрос и есть несколько решений. Удачных поисков!

Если же состояние тасков меняется откуда-то ещё на бэке, т.е. инициатива изменений не в вашем фронте, а на бэке — придётся либо прикручивать сокеты, либо раз в секунду справшивать бэк «есть ли новости?», но это очень плохое решение. Лучше сокеты.

Модули импортируются статически, ещё до выполнения любого кода.

Есть вариант динамического асинхронного импорта import(moduleName). Но у этого способа главный недостаток: WebPack соберёт в отдельный чанк все файлы с флагами, и бандл будет тяжеловат.

Если хочется красоты, можно заморочиться и дописать модуль, где прописаны импорты и тут же экспорты всех флагов. Типа

import ru from "svg-country-flags/svg/ru.svg";
import ua from "svg-country-flags/svg/ua.svg";
// ...

// и там же экспорты:
export ru;
export ua;
// ...

Тогда достаточно будет одной строкой импортировать нужные флаги import { ru, ua } from './mySuperModule';И Webpack разберётся и включит в бандл только нужное.

Когда напишете такой вспомогательный модуль, отправьте, пожалуйста, pull-request в тот репо.

this.$el.dataset.sessid
Или, из более глубокого под-компонента
this.$root.$el.dataset.sessid

Так у вас вот же, выводится весь массив в цикле:

<div v-for="messages in message">{{ messages.name }}</div>

Сделайте вычисляемое свойство, например:

computed: {
  thirdName() {
    if (this.messages.length >= 3) {
      return this.messages[2].name;
    }
  }
},

и показывайте его, когда не пустое: <div v-if="thirdName">Имя: {{ thirdName }}</div>

P. S. вывод всего списка:

ИЛИ
:class='{logoBlack: changeColor || openedMenu}'

Надо же вернуть массив всех, содержащих поисковую фразу?

computed: {
  filteredOffer() {
    const search = this.searchVacancyName.toUpperCase();
    if (0 === search.length) return this.info;

    return this.info
      .filter((item) => item.fieldTypes.vacancyName.toUpperCase().includes(search));
  }
}

const DTF = new Intl.DateTimeFormat('ru-RU');

export default {
  name: "App",
  data() {
    return {
      dateRange: { start: new Date(), end: new Date() },
    };
  },
  computed: {
    display_value() {
      return [this.dateRange.start, this.dateRange.end].map(DTF.format).join(" - ");
    }
  },
};

и выводить в :value этот display_value.

https://codesandbox.io/s/wizardly-pateu-8rn6h?file...

data основного Vue инстанса будет содержать массив объектов данных обнаруженных сокетов.
Из этого массива рендерить список компонентов представления сокета.

Разберитесь с компонентами во Vue. Хотя может, получится обойтись просто строками HTML списка.

Хороший заезженный пример для похожей задачи — Todo App

Внутри {{ }} теги не пройдут. Поэтому надо использовать свойство v-html:

<div class="textmessage" v-html="123<br>321"></div>

Или лучше со свойствами:

<div class="textmessage" v-html="myproperty"></div>

JS

data() {
    return {
      myproperty: "123<br>321",
    };
  },

  //  или вычисляемое свойство
  computed: {
    myproperty() {
      return "123<br>321";
    }
  },

{{ myComputed }}


// ...
  computed: {
    myComputed() {
      return Lightparser.spaghetti();
    },
  },

У вас там лишний закрывающий тег </div> и по кнопкам не видно, какой именно элемент удаляется. Вот фиддл, в котором работает, как у вас задумано:

Вариант 1. События: по кнопке компонент эмитит событие. «Страница» его слушает и переключает свои данные.

<!-- template компонента -->
<button @click="this.$emit('buttoned')">не нажимать</button>

<!-- template страницы -->
<Component1 v-on:buttoned="triggerComponents" />
<!-- надо написать метод triggerComponents(), который поменяет данным true/false -->

Вариант 2, навырост: Vuex. Хранить oneActive, twoActive не в data, а в state глобально доступного store. По кнопкам из компонентов запускать мутации.