Image doesn't preview after taking photo with vuejs

[natatatata]

How will you show the image after it was taken? I'm using ### nativescript-vue with 'nativescript-vue-template' as the template and this is the code I'm using. Thanks!

const Vue = require('nativescript-vue');
const camera = require('nativescript-camera');
const imageModule = require('tns-core-modules/ui/image');

new Vue({
  data() {
    return{
       image: ""
    };
  },
  methods: {    
    openCamera()
    {
      var options = { cameraFacing: 'front'};
      camera.requestPermissions();
      if(camera.isAvailable())
      {
        camera.takePicture(options)
          .then(function(imageAsset) {
            console.log("src: " + imageAsset.android);
            var image = new imageModule.Image();
            image.src = imageAsset.android;
          })
          .catch(function (err) {
            console.log("Error -> " + err.message);
          });
      } 
    }
  },
  template:
   '
    <page>
      <action-bar title="Test App"></action-bar>
      <stack-layout>
        <Button @tap="openCamera()" text="Open Camera"></button>
        <Image :src="image" />
        </stack-layout>
    </page>
    '
}).$start();

[DimitarTodorov]

Hi @natatatata ,

You should remove the function in the .then(function(imageAsset) { and place an arrow => after the parameter imageAsset .then( (imageAsset) => {.
Then replace the var image = new imageModule.Image(); image.src = imageAsset.android; with this.image = imageAsset; This way the code will set directly the image variable to the Image tag in the html.
Bear in mind that NativeScript has Vue.js support, although it is not mandatory that all plugins in NativeScript community has Vue.js support.