Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 867
Tom Avatar asked Jan 13 '18 21:01

Tom


People also ask

Is the method * not defined on the instance?

Property or method * is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option I understand the error but not sure how to fix the code So it is complaining movies is not defined but I do have it in the component, maybe my syntax is wrong?!?

Why is prop not defined on the instance?

[Vue warn]: Property or method "prop" 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.

How to fix [Vue warn] property or method is not defined?

To fix [Vue warn]: Property or method is not defined on the instance but referenced during render with Vue.js, we should make sure the reactive property is defined in the component. to add the name reactive property in the object returned by data. Then we can reference name in the template without errors.

Why is the property search not defined on an instance?

Another reason of seeing the Property "search" was accessed during render but is not defined on instance is when you forget to return the variable in the setup () {} function.


1 Answers

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: [
       ...
like image 86
Traxo Avatar answered Oct 24 '22 10:10

Traxo