I'm currently working on a Vue project where I am attempting to bind the img src attribute to a data value. I am using a setInterval function to dynamically change the URL every time the function is called. However, when I run the page, I encounter an error message:
Property or method "source" 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
My question is how can I achieve this kind of binding and observe the image changes when the related function is invoked by the setInterval function.
Here's my code snippet:
<template>
<v-card elevation="5" class="mx-auto mt-2" shaped max-width="800">
<v-img
class="white--text align-end"
gradient="to bottom left, rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(255,0,0,0.4), rgba(0,0,0,0.8)"
height="500px"
aspect-ratio="1.7"
:src="this.source"
>
<v-card-title class="overline">
<span class="red--text darken-4">
LIVE
<v-icon class="red--text darken-4 ma-2" size="3">mdi-circle</v-icon>
</span>SULTANBEYLI, ISTANBUL | 06/13/2020 - 13.35 PM
</v-card-title>
</v-img>
</v-card>
</template>
<script>
export default {
name: "Camera",
sockets: {
frames(data) {
console.log(data);
}
},
methods: {
},
mounted() {
setInterval(() => {
this.ex += 1;
console.log(this.source)
}, 60000);
},
data: () => ({
ex: "1",
})
};