Почему страница не работает после перезагрузки?

Question

[Zhalgas Saparov]

Я создал страницу в которой вывожу данные из апишки, когда перехожу по ссылке, то все работает, но если я решу перезагрузить страницу, то мне выдает ошибку. Как это можно исправить?

Оставлю код в codepen io

img когда просто перехожу по странице


img когда перезагружаю страницу

Comments

[zkrvndm]

А если дважды перейти по ссылке с минимальным интервалом?

[Игорь]

У вас в шаблоне length = undefined
Вы пытаетесь узнать длину массива.

Скорее всего, myObjects перезаписывается на null или вообще любой другой уже объект, но не массив.

У вас так

<div v-if="myObjects.length == 0">Ничего нет...</div>

Попробуйте так

<div v-if="Array.isArray(myObjects) && myObjects.length === 0">Ничего нет...</div>

[Zhalgas Saparov]

Игорь, Переписал как вы предложили, теперь страница перезагружается, но теперь данных nuxt думает что данных нет(

[Zhalgas Saparov]

Надим Закиров, Пользователь не сможет перейти, т.к. кнопка скрывается после первого нажатия

[Zhalgas Saparov]

Игорь, вот изображение, но данные по сути есть

[Zhalgas Saparov]

Игорь, Я думаю переписать dispatch('getMyObjects'), т.к. он просто возвращает respone, а нужно чтобы он делал мутацию. Далее добавить vuex.watch на state.myObject и сделать dispatch getMyObject

[Игорь]

Коллега, а теперь установите плагин

Там вы всё увидите.
Есть вероятность что там как раз нечего нет.

[Zhalgas Saparov]

Zhalgas Saparov, Как он сейчас написан

async getMyObjects({ state, commit }) {
        try {
          let response = await api().get("playgrounds/my/", {
            headers: {
              Authorization: `Token ${state.user.token}`
            }
          });

          let { data } = response;
          console.log(data.results);
          return data.results;
        } catch (error) {
          throw error;
        }
      }

[Игорь]

Zhalgas Saparov, Да, конечно, пусть действие вызывает мутацию

Привожу свой пример, так как вы хотите.

actions

[CATEGORIES]({commit, state}) {

    if (state[CATEGORIES].length === 0)
      this.$axios.$get(`${process.env.api}/categories.get`, {
        params: {
          lvl: 0,
          offset: 0,
          count: 1000
        }
      }).then(({code, count, items}) => {
        if (code === 0) {
          commit(CATEGORIES, items)
        }
      });
  },

Answer 1

[anikavoi]

Извините, я забыл очки в другом пальто