"Property or method is not defined on the instance but referenced during render"

Question

I need to display the item.title outside the <v-carousel> but I get this error message:

[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I checked the results from the Stackoverflow search but I really struggle to understand it. I would be grateful if somebody could explain it to me by this example. Here is my code:

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

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

<script>
  export default {
    data () {
      return {
        items: [
          {
            src: '/static/a.jpg',
            title: 'A',
            text: 'texta'
          },
          {
            src: '/static/b.jpg',
            title: 'B',
            text: 'textb'
          }
          {
      }
    }
  }
</script>

This is what I need to archive:

As soon as an image changes to the next one - the a text outside of the scope should change too. I tried to check the value of the item array outside the scope but it didn't work: <h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1> How to access the value of the current carousel item outside of the scope?

Answer 1

You need to add v-model on v-carousel component:

<v-carousel v-model="carousel">
    <v-carousel-item 
        v-for="(item,i) in items"
        v-bind:src="item.src"          
        :key="i"
    ></v-carousel-item>
</v-carousel>
//then set title like this:
<h1>TITLE: {{ items[carousel].title }}</h1>

And add carousel variable to data

data () {
  return {
    carousel: 0, //like this
    items: [
       ...