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?
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?!?
[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.
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.
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.
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: [
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With