Level 6
I got it already!
Aug 9, 2016
3
Level 6
Img onerror do something on vuejs
I'm using vue and I need to detect when the img tag responds with a 404, I found that i can execute a function adding the attribute onerror, on that attribute I call a vue js function but i thinks im not doing it on the right way.
<template>
<div class="camera" v-if="isStreaming">
<img :src="'/api/camera/' + camera.slug + '/livestreaminga'" onerror="withOutConnection()">
</div>
</template>
<script>
export default{
props: {
camera: {
type: Object,
twoWay: true,
required: true,
}
},
data(){
return {
isStreaming: true
}
},
methods: {
withOutConnection(){
console.log('The cameras' + this.camera.ip + ':' + this.camera.port + ' is down')
this.isStreaming = false;
}
}
}
</script>
This is the code, the error on the console is:
Uncaught ReferenceError: withOutConnection is not defined
How do I have to call the function withOutConnection
Level 14
@fugues Want to share your final solution?
Level 6
@Niban yes, using jquery...
<template>
<div class="camera" v-show="isStreaming">
<img id="livestraming_{{ _uid }}" :src="'/api/camera/' + camera.slug + '/livestreaming'" :alt="camera.ip">
</div>
</template>
<script>
export default{
props: {
camera: {
type: Object,
twoWay: true,
required: true,
}
},
data(){
return {
isStreaming: false
}
},
ready(){
this.onImageReady();
this.onLeavePage();
},
methods: {
onImageReady(){
var self = this;
$('#livestraming_' + this._uid).bind('load', function() {
self.isStreaming = true;
});
},
onLeavePage(){
var self = this;
$(window).bind('beforeunload', function(e){
self.stopStreaming();
});
},
stopStreaming(){
$('img').attr('src', '')
this.isStreaming = false;
}
},
detached(){
this.stopStreaming()
}
}
</script>
Please or to participate in this conversation.