Vue报错：Property or method未定义，如何在v-carousel外获取当前项？

我来帮你拆解这个问题，你遇到的报错核心原因很明确：item是v-for循环内部的局部变量，只在<v-carousel-item>的作用域内有效，出了这个循环，Vue实例根本找不到这个变量，所以才会提示"Property or method 'item' is not defined"。

要实现轮播切换时外部文本同步更新，你需要跟踪当前活跃的轮播项，具体步骤如下：

步骤1：添加跟踪当前轮播状态的变量 #

在组件的data里新增一个变量，用来记录当前显示的轮播项索引（或者直接记录当前项）：

data () {
  return {
    items: [
      { src: '/static/a.jpg', title: 'A', text: 'texta' },
      { src: '/static/b.jpg', title: 'B', text: 'textb' }
      // 注意：你原来的数组里多了一个空对象`{}`，记得删掉，避免数据异常
    ],
    currentSlideIndex: 0 // 初始默认显示第一个轮播项
  }
}

步骤2：绑定轮播的切换事件 #

Vuetify的<v-carousel>组件提供了change事件，当轮播切换时会触发这个事件，并传入当前激活的索引值。我们需要监听这个事件来更新currentSlideIndex：

<v-carousel @change="onSlideChange">
  <v-carousel-item v-for="(item,i) in items" :src="item.src" :key="i">
  </v-carousel-item>
</v-carousel>

然后在组件的methods里添加事件处理函数：

methods: {
  onSlideChange(index) {
    this.currentSlideIndex = index
  }
}

步骤3：在外部显示当前轮播项的标题 #

现在你可以通过items[currentSlideIndex].title来访问当前活跃项的标题了：

<h1>TITLE: {{ items[currentSlideIndex].title }}</h1>

如果你更习惯直接跟踪当前项而不是索引，也可以把currentSlideIndex换成currentItem，代码调整如下：

data () {
  return {
    items: [
      { src: '/static/a.jpg', title: 'A', text: 'texta' },
      { src: '/static/b.jpg', title: 'B', text: 'textb' }
    ],
    currentItem: null
  }
},
mounted() {
  // 初始化时设置第一个项为当前项
  this.currentItem = this.items[0]
},
methods: {
  onSlideChange(index) {
    this.currentItem = this.items[index]
  }
}

对应的外部标题就可以写成：

<h1>TITLE: {{ currentItem.title }}</h1>

为什么你之前的尝试无效？ #

你写的<h1 v-if="(item,i) === 1">Lion</h1>这种写法是错误的，因为item和i只存在于v-for循环的内部作用域里，在<v-carousel>外面，这两个变量根本没有被定义，Vue实例无法识别它们，自然不会生效。

总结一下，核心思路就是通过轮播组件的切换事件，把当前活跃项的状态同步到Vue实例的响应式变量中，这样整个组件的作用域都能访问到这个状态，外部的文本就能跟着轮播切换同步更新啦～

内容的提问来源于stack exchange，提问作者Tom