无法在具有动态内容的 vue-slick-carousel 中读取未定义的属性（读取“unobserve”）

Question

我正在使用 graphql 和 apollo 向 vue-slick-carousel 中填充动态数据。

这是带有 i18n 的 graphql 查询

import gql from "graphql-tag";

export const GetSlider = gql`
  query GetSlider($locale: I18NLocaleCode) {
    sliderConfigs(locale: $locale) {
      data {
        id
      }
      data {
        attributes {
          title
          subTitle
          sliderImage {
            data {
              attributes {
                url
                name
              }
            }
          }
        }
      }
    }
  }
`;

滑块组件

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import { GetSlider } from "../graphql/GetSlider";
import ContactBtn from "./ContactBtn";

export default {
  name: "Slider",
  components: { VueSlickCarousel, ContactBtn },
  data() {
    return {
      sliderConfigs: [],
      settings: {
        arrows: false,
        autoplay: true,
      },
    };
  },
  apollo: {
    sliderConfigs: {
      prefetch: true,
      query: GetSlider,
      variables() {
        return { locale: this.$i18n.locale };
      },
    },
  },
};
</script>

<style scoped></style>

<template>
  <section class="banner-slide">
    <VueSlickCarousel :data="sliderConfigs" v-bind="settings">
      <div
        v-for="sliderConfigs in sliderConfigs.data"
        v-bind:key="sliderConfigs.id"
        class="banner-area bg_cover d-flex align-items-center"
        :style="{
          backgroundImage: `url(
    'http://localhost:1337${sliderConfigs.attributes.sliderImage.data.attributes.url}'
  )`,
        }"
      >
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <div class="banner-slide-number">
                <span>0{{ sliderConfigs.id }}</span>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-7">
              <div class="banner-content">
                <span data-animation="fadeInDown" data-delay=".1s">
                  <!-- <img src="/assets/images/logo_white_small.svg" alt="" /> -->
                  {{ sliderConfigs.attributes.title }}</span
                >
                <h1 data-animation="fadeInLeft" data-delay=".5s" class="title">
                  {{ sliderConfigs.attributes.subTitle }}
                </h1>
                <ContactBtn data-animation="fadeInLeft" data-delay="1s" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </VueSlickCarousel>
  </section>
</template>

同时，我正在处理的网页包含多种语言选项。主要问题是当我改变语言时，

Cannot read properties of undefined (reading 'unobserve') 错误 发生

当页面正在加载时，但是当我刷新页面时，数据以健康的方式返回。我错过了什么吗？

Answer 1

组件 将它包装在一个 div 中并添加 v-if="sliderConfigs.data" 解决了我的显示问题

<div v-if="sliderConfigs.data">           
     <VueSlickCarousel/>    
</div>

Answer 2

您好，指出了错误位置，但我在您的代码段中看不到任何内容。通常这种错误表明发生了一些异步操作，并且模板正在尝试使用尚未定义的异步数据，这会导致它立即抛出错误。 – 约杜