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组件时出现“无法读取未定义的属性't'”错误

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

我在打字稿项目上遇到了同样的问题。

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

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

1 个答案: