Добавил элементы в массив в local storage, при обновлении страницы компоненты пропадают с экрана, но остаются в local storage, как это исправить?

Question

[danyavodichev]

Я делаю свой аналог Google Forms. У меня есть массив cards, в который добавляются разные типы вопросов (в зависимости от того, какой вопрос вы решили добавить), этот массив cards добавляется в local storage, и компоненты реактивно появляются на экране, однако при обновлении страницы компоненты пропадают с неё, хотя в local storage всё остается на своих местах, помогите решить проблему.

Вот репозиторий github - https://github.com/yoursAniki/Form-Builder-App
Вот github pages - https://yoursaniki.github.io/Form-Builder-App/#/

Comments

[Алексей Ярков]

Добавлять мало, надо ещё и читать оттуда. Вы читаете?
Зачем нам целый репозиторий? Кто в этом копаться будет? Дайте ссылку на код, где конкретно проблема.

[alexalexes]

Ну, тогда вопрос.

onMounted(() => {
  cards.value = JSON.parse(localStorage.getItem('cards')) || []
})

Этого достаточно для отображения компонентов в начальном состоянии, или нужно инициализировать состояния еще каких-то свойств?
В консоли отладки в браузере не выводится ошибка парсинга JSON в связи с исполнением монтирования?
Что парсится тут при прогоне отладки если вставить в это место точку останова?

[danyavodichev]

Алексей Ярков, https://github.com/yoursAniki/Form-Builder-App/blo...
24, 144 строчки самые важные

[danyavodichev]

alexalexes, в консоли нет ошибок связанных с парсингом, однако есть предупреждения по типу

Builder.vue:144 [Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  {__name: 'ShortTextCard', props: {…}, __hmrId: 'e1261aca', __file: 'C:/Users/yoursaniki/Desktop/Form Builder App/src/components/ShortTextCard.vue'} 
  at <Builder onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <App>

Поясните, о какой точке остановки идет речь.

[Алексей Ярков]

danyavodichev,

{
  "id": 1707724832476,
  "component": {
    "__name": "ShortTextCard",
    "props": {}
  },
  "order": 1,
  "isRequired": false
}

А у вас "component" точно объектом планировался быть? Может там название компонента должно быть?

[danyavodichev]

Алексей Ярков, ой, действительно, должно быть только название, а как это исправить?

[Алексей Ярков]

danyavodichev, а вон товарищ 0xD34F вам ответил ))

Answer 1

[0xD34F]

const addCard = (cardName) => {
  cards.value.push({
    id: Date.now(),
    component: cardName,
    order: cards.value.length + 1,
    isRequired: false
  })
}

Что такое cardName? Не то, что вам, судя по имени параметра, кажется. Это не имя, а сам объект компонента. И вы его потом в localStorage засовываете. Так что методы setup и render теряются.

Сложите компоненты в объект:

const components = {
  ShortTextCard,
  LongTextCard,
  SingleQuestionCard,
  MultiQuestionCard,
};

Передавайте в addCard их имена:

- @click="addCard(ShortTextCard)"
+ @click="addCard('ShortTextCard')"

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

- :is="card.component"
+ :is="components[card.component]"

Comments

[danyavodichev]

спасибо большое, действительно, не заметил сразу