使用 vuetify v-carousel 组件时出现“无法读取未定义的属性 't'”错误

Question

我目前正在使用 Laravel 和 Vue/Vuetify 制作图像轮播，我正在使用 Vuetify v-carousel 和 v-carousel-item 来实现这一点，除了轮播由于错误而无法呈现标题。

我已经根据 vuetify 文档正确初始化了我的 Vuetify 实例（我认为）

--下面的代码是我的 app.js--

import Vue from 'vue'
import Vuetify, {VCarousel} from 'vuetify/lib'

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.use(Vuetify, {
    components: {
      VCarousel,
    },
  })

// export default new Vuetify({})

const app = new Vue({
}).$mount('#app');

--下面的代码是针对使用轮播的组件--

<template>
    <v-carousel>
      <v-carousel-item v-for="(slide, i) in slides" :src = "slide.content " :key=i>
      </v-carousel-item>
      <v-carousel-item>
          <!-- <v-playback autoPlay :url = "video" :type="video/mp4" :width = "720" @play = "pauseCarousel" @pause = "playCarousel" ref = 'videoPlayer'></v-playback> -->
      </v-carousel-item>
    </v-carousel>
</template>

这给了我这个错误

[Vue warn]: Error in render: "TypeError: Cannot read property 't' of undefined"

found in

---> <VCarousel>
       <ImageCarousel> at resources/js/components/ImageCarousel.vue
         <ExampleComponent> at resources/js/components/ExampleComponent.vue
           <Root>

Answer 1

我将继续假设您使用的是 firefox

使用 vuetify v-carousel 组件时出现“Cannot read property 't' of undefined”错误

这种类型的错误通常在firefox 中发现，因为它无法正确读取已转译项目的源映射，从而产生该错误。

我在 typescript 项目中遇到了同样的问题。

我建议（暂时）切换到chrome 进行调试，这将为您提供更详细的真实错误消息。