Show Image EXIF for User with VueJS - vue.js

Question

I work with Exif.js and VueJS for my project.
but i have problem.
when i want show information of image on screen it doesn't work.
but it work on Browser Console.
How i show information with tag in html for Users?
Here is my code:
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Vue exif meta info getter',
DateImage: "DateTimeDigitized"
},
components: {
'picture-input': PictureInput
},
methods: {
onChange(image) {
console.log('onChange!')
if (image) {
EXIF.getData(this.$refs.pictureInput.file, function () {
console.log('image info', this)
console.log('exif data', this.exifdata)
console.log("date image jadid : " + this.DateImage);
})
} else {
console.log(`it's not image`)
}
},
getEI() {
var old = console.log;
var logger = document.getElementById('log');
console.log = function (message) {
if (typeof message == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
} else {
logger.innerHTML += message + '<br />';
}
}
}
}
})
</script>

Answer 1

you have an issue with data and reactivity. Here the concepts from the vue guide.
"Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive."
Means data should be a function for reusability and you need declare a variable for apply the exif values and be capable of show them updated in the screen
Extra, next time include your html part sometimes the errors will be there.
A extra common problem starting with vue is the use of this, well this inside exif it's not the same to this in vue. An easy way for bypass 'this' issue is save the vue this in a temporary variable (let vm = this) and use them inside the exif code.
Just like that:
<template>
<!-- exifs is an object, you can print direct a value
if you know their key (exifs.Name) or you can iterate
with v-for and show all the values -->
<p v-for="ex in exifs">
{{ex}}
</p>
</template>
<script>
const app = new Vue({
el: '#app',
data() {
return {
message: 'Vue exif meta info getter',
DateImage: "DateTimeDigitized",
exifs: null
}
},
components: {
'picture-input': PictureInput
},
methods: {
onChange(image) {
console.log('onChange!')
if (image) {
let vm = this
EXIF.getData(this.$refs.pictureInput.file, function () {
vm.exifs = this
})
} else {
console.log(`it's not image`)
}
},
getEI() {
var old = console.log;
var logger = document.getElementById('log');
console.log = function (message) {
if (typeof message == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
} else {
logger.innerHTML += message + '<br />';
}
}
}
}
})
</script>
Here the example you use from jsfiddle fixed