Невозможно прочитать свойство indexOf из неопределенного при использовании Vue Carousel

Question

Я использую последнюю версию Vue Carousel в своем приложении Nuxt JS.Кажется, что я получаю ошибки в каждом из моих сообщений в блоге, когда использую режим universal для Nuxt JS.Если я вынимаю Vue Carousel и выполняю стандартную петлю v-for, блоги прекрасно выглядят, что-то вызывает ошибку при использовании карусели.

Мой код:

<carousel :paginationEnabled="false" :navigationEnabled="true" :perPageCustom="[[250, 1], [1024, 2]]">
              <slide v-for="blog in blogs.blogs" :key="blog.id" v-if="currentBlogDate >= blog.created && blog.created">
                <b-card class="text-center m-3 p-0 p-md-3">
                  <h4 class="display-4 font-weight-normal mb-3">{{ blog.title | striphtml | truncate(32, '...') }}</h4>
                  <b-card-text class="text-muted">{{ blog.body | striphtml | truncate(32, '...') }}</b-card-text>
                  <b-button :to="'/posts/view/' + blog.title" size="sm" variant="primary">Read More<i class="fas fa-angle-right pl-2"></i></b-button>
                </b-card>
              </slide>
            </carousel>

ошибка:

TypeError: Cannot read property 'indexOf' of undefined

Answer 1

Похоже, ваш компонент не оптимизирован для рендеринга на стороне сервера.

Имейте в виду, что Nuxt.js universal не имеет ни window, ни document объектов во время рендеринга на стороне сервера.

Быстрое решение для вас - это обернуть несовместимые компоненты SSR компонентом <no-ssr></no-ssr>.

https://nuxtjs.org/api/components-no-ssr#the-lt-no-ssr-gt-component