我正在Vue项目上工作，实际上我正在尝试将img src属性绑定到数据值，然后每次使用setInterval函数动态更改url时，但是运行页面时，错误像
属性或方法“源”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。请参阅：https : //vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
在发现
所以我的问题是当setInterval函数调用相关函数时，如何进行这种绑定并查看图像变化
我的代码是
<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)
this.source = `http://aua.0xseck.fun/tr/1/${this.ex}.jpg`
}, 60000);
},
data: () => ({
ex: "1",
source: "http://aua.0xseck.fun/tr/1/1.jpg"
})
};
我举一个最小的例子：
<template>
<div>
<img :src="image" />
</div>
</template>
<script>
export default {
name: 'App',
data: () => ({
image: null,
imageCode: 1,
}),
mounted() {
setInterval(() => {
if (this.imageCode == 1) {
this.image =
'https://smaller-pictures.appspot.com/images/dreamstime_xxl_65780868_small.jpg';
this.imageCode = 2;
} else {
this.image =
'https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png';
this.imageCode = 1;
}
}, 2000);
},
};
</script>
您的代码的问题可能是“ ex”变量的类型。尝试使用整数值：
data: () => ({
ex: 1,
source: "http://aua.0xseck.fun/tr/1/1.jpg"
})
另一件事，尝试在模板中声明时不要包含“ this”：
<v-img :src="source"></v-img>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句