How Show Variable in onchange Method in VueJS?

Question

How Can Show Variable in Page if its on onchange Method. for Example this Code:

methods: {
onChange(image) {
if (image) {

        EXIF.getData(this.$refs.pictureInput.file, function () {
          var make = EXIF.getTag(this, "Make"),
            model = EXIF.getTag(this, "Model");
        })
      } else {
        console.log(`it's not image`)
      }
    },
}

I want show make and model variable to User.

Answer 1

To access the this of a component inside another scope, (in your case your EXIF callback) just create a new reference to the component's this in the higher scope and access it inside the callback function.

export default {
  data () {
    return {
      name: '',
      model: ''
    }
  },
  methods: {
    onChange(image) {
      const component = this;

      if (image) {
        EXIF.getData(this.$refs.pictureInput.file, function () {
          var make = EXIF.getTag(this, "Make"),
              model = EXIF.getTag(this, "Model");

          component.make = make;
          component.model = model;
        })
      } else {
        console.log(`it's not image`)
      }
    }
  }
}

Now inside your template:

<template>
  <div>
    <span>Name: {{name}}</span>
    <span>Model: {{model}}</span>
  </div>
</template>