无法读取具有动态内容的 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>

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

无法读取未定义的属性(读取'观察')错误发生

，但当我刷新页面时，数据以正常的方式返回。我是不是漏掉了什么?

Answer 1

组件将其包装在div中并添加v-if="sliderConfigs.data"修复了我的显示问题

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