gistfile1.txt

<template>
  <q-layout>
     <!-- Header -->
  <div slot="header" class="toolbar">
    <q-toolbar-title :padding="1">
      Scan Stock (beta)
    </q-toolbar-title>
  </div>
  <!-- Navigation Tabs -->
  <q-tabs slot="navigation">
    <q-tab icon="alarm" route="/stockin" exact replace>In</q-tab>
    <q-tab icon="alarm" route="/stockout" exact replace>Out</q-tab>
    <q-tab icon="help" route="/help" exact replace>help</q-tab>
  </q-tabs>
  <!-- IF USING subRoutes only: -->
  <router-view class="layout-view"></router-view>
  <!-- OR ELSE, IF NOT USING subRoutes: -->
  <div class="layout-padding">

      <blockquote v-if="!hasITEMS">
          <small>
            Please Click on the (+) button to scan the item.
          </small>
      </blockquote>
      <div v-else class="list striped">
      <p class="caption">Qr Details</p>
          <div class="item two-lines item-delimiter" v-for="(item, id) in itemsInStock">
            <i class="item-primary cursor-pointer"  >
            <div class="item-content">
              <div>{{item}} hello</div>
              <div class="text-primary cursor-pointer" @click="testMethod()">{{item}}</div>
            </div>
          </div>
      </div>
  <!-- cordova-only -->
   
    <q-fab class=" absolute-bottom-right" classNames="primary" direction="up">
     <q-small-fab class="absolute-bottom-right" @click.native="scanQR()" icon="phonelink_ring"></q-small-fab>
    </q-fab>
    <!-- <button class="grey push small" @click.native="scanQR()">
            run console.log(cordova)
           
          </button> -->
  </div>
  <!-- Footer -->
  <div slot="footer" class="toolbar">
    All right reserved Nano Corporation .
  </div>
  </q-layout>
</template>

<script>
import { Dialog, Toast } from 'quasar'

export default {
  mounted(){
    console.log(this.$cordova);
  },
  data(){

    return {
      urls:false,
      itemsInStock:[]
    }

  },
  methods:{
    scanQR () {
      var that = this;
      cordova.plugins.barcodeScanner.scan(

        function (result) {
            that.itemsInStock.push(result.text);
            Toast.create.positive('Result added')
        },
        function (error) {
            alert("Scanning failed: " + error);
        },
        {
            preferFrontCamera : false, // iOS and Android
            showFlipCameraButton : true, // iOS and Android
            showTorchButton : true, // iOS and Android
            torchOn: false, 
            prompt : "Place a barcode inside the scan area", // Android
            resultDisplayDuration: 500
        }
     );
    },
    testMethod () {
        console.log(this.itemsInStock);
    }
  },
  computed: {
    hasITEMS () {

      return Object.keys(this.itemsInStock).length > 0
    }
  }
}
</script>

<style lang="stylus">
.logo-container
  width 192px
  height 268px
  perspective 800px
  position absolute
  top 50%
  left 50%
  transform translateX(-50%) translateY(-50%)
.logo
  position absolute
  transform-style preserve-3d
</style>